@atlaskit/editor-plugin-annotation 27.0.6 → 28.1.0

package/dist/es2019/pm-plugins/annotation-manager-hooks.js

@@ -1,14 +1,18 @@
 import { AnnotationTypes } from '@atlaskit/adf-schema/annotation';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { getAnnotationInlineNodeTypes, getRangeInlineNodeNames } from '@atlaskit/editor-common/utils/annotation';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { setInlineCommentDraftState, createAnnotation, setSelectedAnnotation, closeComponent, setHoveredAnnotation, removeInlineCommentFromDoc } from '../editor-commands';
 import { AnnotationSelectionType } from '../types';
+import { resolveAnnotatableTargetFromLocalId } from './resolve-annotatable-target';
 import { inlineCommentPluginKey, isSelectionValid } from './utils';
 const ERROR_REASON_DRAFT_NOT_STARTED = 'draft-not-started';
 const ERROR_REASON_DRAFT_IN_PROGRESS = 'draft-in-progress';
 const ERROR_REASON_RANGE_MISSING = 'range-no-longer-exists';
 const ERROR_REASON_RANGE_INVALID = 'invalid-range';
 const ERROR_REASON_ID_INVALID = 'id-not-valid';
+const ERROR_REASON_INVALID_LOCAL_ID = 'invalid-localId';
 const domRefFromPos = (view, position) => {
   let dom;
   try {
@@ -38,8 +42,8 @@ export const allowAnnotation = (editorView, options) => () => {
   }
   return isSelectionValid(editorView.state, options.provider.supportedBlockNodes, options.provider.isBlockNodeSupported) === AnnotationSelectionType.VALID;
 };
-export const startDraft = (editorView, options) => () => {
-  var _getRangeInlineNodeNa, _options$annotationMa2;
+export const startDraft = (editorView, options) => localId => {
+  var _getRangeInlineNodeNa2, _options$annotationMa3;
   const {
     isDrafting,
     selectedAnnotations
@@ -68,6 +72,71 @@ export const startDraft = (editorView, options) => () => {
       });
     });
   }
+  if (localId !== undefined) {
+    var _$target$parent, _target$node$attrs$id, _getRangeInlineNodeNa, _options$annotationMa2;
+    const target = resolveAnnotatableTargetFromLocalId(editorView.state, localId, {
+      supportedBlockNodes: options.provider.supportedBlockNodes
+    });
+    if (!target) {
+      return {
+        success: false,
+        reason: ERROR_REASON_INVALID_LOCAL_ID
+      };
+    }
+
+    // The resolver returns the node accepting the annotation (the inner `media`), but
+    // `isSelectionValid` requires the selection to be on the selectable `mediaSingle`.
+    const {
+      doc
+    } = editorView.state;
+    let selectionPos = target.pos;
+    const $target = doc.resolve(target.pos);
+    if (target.node.type.name === 'media' && ((_$target$parent = $target.parent) === null || _$target$parent === void 0 ? void 0 : _$target$parent.type.name) === 'mediaSingle') {
+      selectionPos = $target.before();
+    }
+
+    // A NodeSelection makes resolveDraftBookmark record isBlockNode: true.
+    editorView.dispatch(editorView.state.tr.setSelection(NodeSelection.create(doc, selectionPos)));
+    const targetNodeId = (_target$node$attrs$id = target.node.attrs.id) !== null && _target$node$attrs$id !== void 0 ? _target$node$attrs$id : target.node.attrs.localId;
+    setInlineCommentDraftState(options.editorAnalyticsAPI, options.provider.supportedBlockNodes, options.api, options.provider.isBlockNodeSupported)(true, INPUT_METHOD.FLOATING_TB, 'block', targetNodeId, true)(editorView.state, editorView.dispatch);
+    const {
+      draftDecorationSet
+    } = inlineCommentPluginKey.getState(editorView.state) || {};
+    const decorations = draftDecorationSet === null || draftDecorationSet === void 0 ? void 0 : draftDecorationSet.find();
+    if (!(decorations !== null && decorations !== void 0 && decorations.length)) {
+      return {
+        success: false,
+        reason: ERROR_REASON_RANGE_INVALID
+      };
+    }
+    const from = decorations[0].from;
+    const targetElement = domRefFromPos(editorView, from);
+    const inlineNodeTypes = (_getRangeInlineNodeNa = getRangeInlineNodeNames({
+      doc: editorView.state.doc,
+      pos: {
+        from,
+        to: decorations[decorations.length - 1].to
+      }
+    })) !== null && _getRangeInlineNodeNa !== void 0 ? _getRangeInlineNodeNa : [];
+    const targetNodeType = target.node.type.name;
+    (_options$annotationMa2 = options.annotationManager) === null || _options$annotationMa2 === void 0 ? void 0 : _options$annotationMa2.emit({
+      name: 'draftAnnotationStarted',
+      data: {
+        targetElement,
+        actionResult: undefined,
+        inlineNodeTypes,
+        targetNodeType
+      }
+    });
+    return {
+      success: true,
+      targetElement,
+      // In Editor the action result is undefined, because the editor will perform the transaction on the document.
+      actionResult: undefined,
+      inlineNodeTypes,
+      targetNodeType
+    };
+  }
   setInlineCommentDraftState(options.editorAnalyticsAPI, options.provider.supportedBlockNodes, options.api, options.provider.isBlockNodeSupported)(true)(editorView.state, editorView.dispatch);
   const {
     draftDecorationSet
@@ -83,14 +152,14 @@ export const startDraft = (editorView, options) => () => {
   }
   const from = decorations[0].from;
   const targetElement = domRefFromPos(editorView, from);
-  const inlineNodeTypes = (_getRangeInlineNodeNa = getRangeInlineNodeNames({
+  const inlineNodeTypes = (_getRangeInlineNodeNa2 = getRangeInlineNodeNames({
     doc: editorView.state.doc,
     pos: {
       from,
       to: decorations[decorations.length - 1].to
     }
-  })) !== null && _getRangeInlineNodeNa !== void 0 ? _getRangeInlineNodeNa : [];
-  (_options$annotationMa2 = options.annotationManager) === null || _options$annotationMa2 === void 0 ? void 0 : _options$annotationMa2.emit({
+  })) !== null && _getRangeInlineNodeNa2 !== void 0 ? _getRangeInlineNodeNa2 : [];
+  (_options$annotationMa3 = options.annotationManager) === null || _options$annotationMa3 === void 0 ? void 0 : _options$annotationMa3.emit({
     name: 'draftAnnotationStarted',
     data: {
       targetElement,
@@ -107,6 +176,7 @@ export const startDraft = (editorView, options) => () => {
   };
 };
 export const clearDraft = (editorView, options) => () => {
+  var _options$annotationMa4;
   const {
     isDrafting,
     draftDecorationSet
@@ -126,12 +196,15 @@ export const clearDraft = (editorView, options) => () => {
   }
   setInlineCommentDraftState(options.editorAnalyticsAPI, undefined, options.api)(false)(editorView.state, editorView.dispatch);
   !editorView.hasFocus() && editorView.focus();
+  (_options$annotationMa4 = options.annotationManager) === null || _options$annotationMa4 === void 0 ? void 0 : _options$annotationMa4.emit({
+    name: 'draftAnnotationCleared'
+  });
   return {
     success: true
   };
 };
 export const applyDraft = (editorView, options) => id => {
-  var _options$annotationMa3, _getAnnotationInlineN2;
+  var _options$annotationMa5, _getAnnotationInlineN2;
   const {
     isDrafting,
     draftDecorationSet,
@@ -160,7 +233,7 @@ export const applyDraft = (editorView, options) => id => {
 
   // When a draft is applied it is automatically selected, so we need to set the selected annotation.
   // emit the event for the selected annotation.
-  (_options$annotationMa3 = options.annotationManager) === null || _options$annotationMa3 === void 0 ? void 0 : _options$annotationMa3.emit({
+  (_options$annotationMa5 = options.annotationManager) === null || _options$annotationMa5 === void 0 ? void 0 : _options$annotationMa5.emit({
     name: 'annotationSelectionChanged',
     data: {
       annotationId: id,
@@ -177,7 +250,7 @@ export const applyDraft = (editorView, options) => id => {
   };
 };
 export const getDraft = (editorView, _options) => () => {
-  var _getRangeInlineNodeNa2;
+  var _getRangeInlineNodeNa3;
   const {
     isDrafting,
     draftDecorationSet
@@ -197,13 +270,13 @@ export const getDraft = (editorView, _options) => () => {
   }
   const from = decorations[0].from;
   const targetElement = domRefFromPos(editorView, from);
-  const inlineNodeTypes = (_getRangeInlineNodeNa2 = getRangeInlineNodeNames({
+  const inlineNodeTypes = (_getRangeInlineNodeNa3 = getRangeInlineNodeNames({
     doc: editorView.state.doc,
     pos: {
       from,
       to: decorations[decorations.length - 1].to
     }
-  })) !== null && _getRangeInlineNodeNa2 !== void 0 ? _getRangeInlineNodeNa2 : [];
+  })) !== null && _getRangeInlineNodeNa3 !== void 0 ? _getRangeInlineNodeNa3 : [];
   return {
     success: true,
     inlineNodeTypes,
@@ -237,10 +310,10 @@ export const setIsAnnotationSelected = (editorView, options) => (id, isSelected)
   if (isSelected !== isCurrentlySelected) {
     // the annotation is selection is changing.
     if (isCurrentlySelected && !isSelected) {
-      var _options$annotationMa4, _getAnnotationInlineN3;
+      var _options$annotationMa6, _getAnnotationInlineN3;
       // the selected annotaion is being unselected, so we need to close the view.
       closeComponent()(editorView.state, editorView.dispatch);
-      (_options$annotationMa4 = options.annotationManager) === null || _options$annotationMa4 === void 0 ? void 0 : _options$annotationMa4.emit({
+      (_options$annotationMa6 = options.annotationManager) === null || _options$annotationMa6 === void 0 ? void 0 : _options$annotationMa6.emit({
         name: 'annotationSelectionChanged',
         data: {
           annotationId: id,
@@ -249,15 +322,15 @@ export const setIsAnnotationSelected = (editorView, options) => (id, isSelected)
         }
       });
     } else if (!isCurrentlySelected && isSelected) {
-      var _options$annotationMa6, _getAnnotationInlineN5;
+      var _options$annotationMa8, _getAnnotationInlineN5;
       // the annotation is currently not selected and is being selected, so we need to open the view.
       setSelectedAnnotation(id)(editorView.state, editorView.dispatch);
 
       // the current annotations are going to be unselected. So we need to notify listeners of this change also.
       selectedAnnotations === null || selectedAnnotations === void 0 ? void 0 : selectedAnnotations.forEach(annotation => {
         if (annotation.id !== id) {
-          var _options$annotationMa5, _getAnnotationInlineN4;
-          (_options$annotationMa5 = options.annotationManager) === null || _options$annotationMa5 === void 0 ? void 0 : _options$annotationMa5.emit({
+          var _options$annotationMa7, _getAnnotationInlineN4;
+          (_options$annotationMa7 = options.annotationManager) === null || _options$annotationMa7 === void 0 ? void 0 : _options$annotationMa7.emit({
             name: 'annotationSelectionChanged',
             data: {
               annotationId: annotation.id,
@@ -269,7 +342,7 @@ export const setIsAnnotationSelected = (editorView, options) => (id, isSelected)
       });
 
       // Lastly we need to emit the event for the selected annotation.
-      (_options$annotationMa6 = options.annotationManager) === null || _options$annotationMa6 === void 0 ? void 0 : _options$annotationMa6.emit({
+      (_options$annotationMa8 = options.annotationManager) === null || _options$annotationMa8 === void 0 ? void 0 : _options$annotationMa8.emit({
         name: 'annotationSelectionChanged',
         data: {
           annotationId: id,

package/dist/esm/annotationPlugin.js

@@ -90,6 +90,13 @@ export var annotationPlugin = function annotationPlugin(_ref) {
         var _annotationProviders$, _annotationProviders$2;
         return fg('cc_maui_annotations_on_extensions') && (annotationProviders === null || annotationProviders === void 0 || (_annotationProviders$ = (_annotationProviders$2 = annotationProviders.inlineComment).isBlockNodeSupported) === null || _annotationProviders$ === void 0 ? void 0 : _annotationProviders$.call(_annotationProviders$2, node)) === true;
       },
+      getAddCommentPermission: function getAddCommentPermission() {
+        var _annotationProviders$3, _annotationProviders$4, _annotationProviders$5;
+        return {
+          canAddComments: (_annotationProviders$3 = annotationProviders === null || annotationProviders === void 0 || (_annotationProviders$4 = (_annotationProviders$5 = annotationProviders.inlineComment).getCanAddComments) === null || _annotationProviders$4 === void 0 ? void 0 : _annotationProviders$4.call(_annotationProviders$5)) !== null && _annotationProviders$3 !== void 0 ? _annotationProviders$3 : true,
+          contentType: annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.contentType
+        };
+      },
       hasAnyUnResolvedAnnotationInPage: hasAnyUnResolvedAnnotationInPage,
       requestCloseInlineComment: requestCloseInlineComment,
       stripNonExistingAnnotations: stripNonExistingAnnotations,
@@ -98,10 +105,10 @@ export var annotationPlugin = function annotationPlugin(_ref) {
         return createAnnotation(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api)(annotationId, AnnotationTypes.INLINE_COMMENT, annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.supportedBlockNodes, annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.isBlockNodeSupported);
       },
       removeInlineCommentAnnotation: function removeInlineCommentAnnotation(annotationId) {
-        var _api$analytics2, _annotationProviders$3;
-        return removeInlineCommentFromDoc(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)(annotationId, (_annotationProviders$3 = annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.supportedBlockNodes) !== null && _annotationProviders$3 !== void 0 ? _annotationProviders$3 : [], annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.isBlockNodeSupported);
+        var _api$analytics2, _annotationProviders$6;
+        return removeInlineCommentFromDoc(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)(annotationId, (_annotationProviders$6 = annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.supportedBlockNodes) !== null && _annotationProviders$6 !== void 0 ? _annotationProviders$6 : [], annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.isBlockNodeSupported);
       },
-      setInlineCommentDraftState: setInlineCommentDraftState(api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.supportedBlockNodes, undefined, annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.isBlockNodeSupported),
+      setInlineCommentDraftState: setInlineCommentDraftState(api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.supportedBlockNodes, undefined, annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.isBlockNodeSupported, annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.createCommentExperience),
       showCommentForBlockNode: showInlineCommentForBlockNode(annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.supportedBlockNodes, annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.isBlockNodeSupported),
       setSelectedAnnotation: setSelectedAnnotation,
       setPendingSelectedAnnotation: setPendingSelectedAnnotation
@@ -113,7 +120,9 @@ export var annotationPlugin = function annotationPlugin(_ref) {
       var pluginState = getPluginState(editorState) || undefined;
       var clonedPluginState = Object.assign({}, pluginState);
       clonedPluginState === null || clonedPluginState === void 0 || delete clonedPluginState.featureFlagsPluginState;
-      return clonedPluginState;
+      return _objectSpread(_objectSpread({}, clonedPluginState), {}, {
+        annotationManager: annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.annotationManager
+      });
     },
     pmPlugins: function pmPlugins() {
       return [{
@@ -166,11 +175,11 @@ export var annotationPlugin = function annotationPlugin(_ref) {
         var pluginState = getPluginState(state);
         if (pluginState && pluginState.isVisible && !pluginState.bookmark && !pluginState.mouseData.isSelecting) {
           var _api$analytics5;
-          var _annotationProviders$4 = annotationProviders.inlineComment,
-            isToolbarAbove = _annotationProviders$4.isToolbarAbove,
-            onCommentButtonMount = _annotationProviders$4.onCommentButtonMount,
-            getCanAddComments = _annotationProviders$4.getCanAddComments,
-            contentType = _annotationProviders$4.contentType;
+          var _annotationProviders$7 = annotationProviders.inlineComment,
+            isToolbarAbove = _annotationProviders$7.isToolbarAbove,
+            onCommentButtonMount = _annotationProviders$7.onCommentButtonMount,
+            getCanAddComments = _annotationProviders$7.getCanAddComments,
+            contentType = _annotationProviders$7.contentType;
           var toolbarConfig = buildToolbar(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions)({
             state: state,
             intl: intl,

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

@@ -4,7 +4,9 @@ import { AnnotationTypes } from '@atlaskit/adf-schema/annotation';
 
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics/types/enums';
 import { RESOLVE_METHOD } from '@atlaskit/editor-common/analytics/types/inline-comment-events';
+import { NATIVE_EMBED_EXTENSION_KEY } from '@atlaskit/editor-common/extensions/manifest-helpers';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { createCommand } from '../pm-plugins/plugin-factory';
 import { ACTIONS } from '../pm-plugins/types';
 import { getPluginState, inlineCommentPluginKey, isSelectionValid, isSupportedBlockNode } from '../pm-plugins/utils';
@@ -243,16 +245,35 @@ export var setInlineCommentDraftState = function setInlineCommentDraftState(edit
   var supportedBlockNodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var api = arguments.length > 2 ? arguments[2] : undefined;
   var isBlockNodeSupported = arguments.length > 3 ? arguments[3] : undefined;
+  var createCommentExperience = arguments.length > 4 ? arguments[4] : undefined;
   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 targetNodeId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
     var isOpeningMediaCommentFromToolbar = arguments.length > 4 ? arguments[4] : undefined;
     var commandAction = getDraftCommandAction(drafting, targetType, targetNodeId, supportedBlockNodes, isBlockNodeSupported, isOpeningMediaCommentFromToolbar);
-    if (Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) {
-      return function (state, dispatch) {
-        var tr = transform.handleDraftState(editorAnalyticsAPI)(drafting, inputMethod)(state.tr, state);
+    var draftCommand = !(api !== null && api !== void 0 && api.toolbar) ? createCommand(commandAction, transform.handleDraftState(editorAnalyticsAPI)(drafting, inputMethod)) : undefined;
+    return function (state, dispatch, view) {
+      // Start tracking only when a valid draft is dispatched, never during dry runs.
+      var dispatchDraft = dispatch && drafting && targetType === 'block' && state.selection instanceof NodeSelection && state.selection.node.type.name === 'extension' && state.selection.node.attrs.extensionKey === "".concat(NATIVE_EMBED_EXTENSION_KEY, ":maui") && fg('cc_maui_annotations_on_extensions') ? function (tr) {
+        createCommentExperience === null || createCommentExperience === void 0 || createCommentExperience.start({
+          attributes: {
+            pageClass: 'editor',
+            commentType: 'block',
+            blockType: 'extension',
+            commentTargetType: 'remixEmbed',
+            entryPoint: 'highlightActions'
+          }
+        });
+        createCommentExperience === null || createCommentExperience === void 0 || createCommentExperience.initExperience.start();
+        dispatch(tr);
+      } : dispatch;
+      if (Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) {
         var newPluginState = commandAction(state);
+        if (!newPluginState) {
+          return false;
+        }
+        var tr = transform.handleDraftState(editorAnalyticsAPI)(drafting, inputMethod)(state.tr, state);
         if (tr && newPluginState) {
           tr.setMeta(inlineCommentPluginKey, newPluginState);
           if (drafting) {
@@ -260,17 +281,16 @@ export var setInlineCommentDraftState = function setInlineCommentDraftState(edit
           } else {
             resetUserIntent(api, tr);
           }
-          if (dispatch) {
-            dispatch(tr);
+          if (dispatchDraft) {
+            dispatchDraft(tr);
           }
         } else {
           return false;
         }
         return true;
-      };
-    } else {
-      return createCommand(commandAction, transform.handleDraftState(editorAnalyticsAPI)(drafting, inputMethod));
-    }
+      }
+      return draftCommand ? draftCommand(state, dispatchDraft, view) : false;
+    };
   };
 };
 export var addInlineComment = function addInlineComment(editorAnalyticsAPI, editorAPI) {

package/dist/esm/pm-plugins/annotation-manager-hooks.js

@@ -1,14 +1,18 @@
 import { AnnotationTypes } from '@atlaskit/adf-schema/annotation';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { getAnnotationInlineNodeTypes, getRangeInlineNodeNames } from '@atlaskit/editor-common/utils/annotation';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { setInlineCommentDraftState, createAnnotation, setSelectedAnnotation, closeComponent, setHoveredAnnotation, removeInlineCommentFromDoc } from '../editor-commands';
 import { AnnotationSelectionType } from '../types';
+import { resolveAnnotatableTargetFromLocalId } from './resolve-annotatable-target';
 import { inlineCommentPluginKey, isSelectionValid } from './utils';
 var ERROR_REASON_DRAFT_NOT_STARTED = 'draft-not-started';
 var ERROR_REASON_DRAFT_IN_PROGRESS = 'draft-in-progress';
 var ERROR_REASON_RANGE_MISSING = 'range-no-longer-exists';
 var ERROR_REASON_RANGE_INVALID = 'invalid-range';
 var ERROR_REASON_ID_INVALID = 'id-not-valid';
+var ERROR_REASON_INVALID_LOCAL_ID = 'invalid-localId';
 var domRefFromPos = function domRefFromPos(view, position) {
   var dom;
   try {
@@ -40,8 +44,8 @@ export var allowAnnotation = function allowAnnotation(editorView, options) {
   };
 };
 export var startDraft = function startDraft(editorView, options) {
-  return function () {
-    var _getRangeInlineNodeNa, _options$annotationMa2;
+  return function (localId) {
+    var _getRangeInlineNodeNa2, _options$annotationMa3;
     var _ref2 = inlineCommentPluginKey.getState(editorView.state) || {},
       isDrafting = _ref2.isDrafting,
       selectedAnnotations = _ref2.selectedAnnotations;
@@ -69,9 +73,71 @@ export var startDraft = function startDraft(editorView, options) {
         });
       });
     }
+    if (localId !== undefined) {
+      var _$target$parent, _target$node$attrs$id, _getRangeInlineNodeNa, _options$annotationMa2;
+      var target = resolveAnnotatableTargetFromLocalId(editorView.state, localId, {
+        supportedBlockNodes: options.provider.supportedBlockNodes
+      });
+      if (!target) {
+        return {
+          success: false,
+          reason: ERROR_REASON_INVALID_LOCAL_ID
+        };
+      }
+
+      // The resolver returns the node accepting the annotation (the inner `media`), but
+      // `isSelectionValid` requires the selection to be on the selectable `mediaSingle`.
+      var doc = editorView.state.doc;
+      var selectionPos = target.pos;
+      var $target = doc.resolve(target.pos);
+      if (target.node.type.name === 'media' && ((_$target$parent = $target.parent) === null || _$target$parent === void 0 ? void 0 : _$target$parent.type.name) === 'mediaSingle') {
+        selectionPos = $target.before();
+      }
+
+      // A NodeSelection makes resolveDraftBookmark record isBlockNode: true.
+      editorView.dispatch(editorView.state.tr.setSelection(NodeSelection.create(doc, selectionPos)));
+      var targetNodeId = (_target$node$attrs$id = target.node.attrs.id) !== null && _target$node$attrs$id !== void 0 ? _target$node$attrs$id : target.node.attrs.localId;
+      setInlineCommentDraftState(options.editorAnalyticsAPI, options.provider.supportedBlockNodes, options.api, options.provider.isBlockNodeSupported)(true, INPUT_METHOD.FLOATING_TB, 'block', targetNodeId, true)(editorView.state, editorView.dispatch);
+      var _ref3 = inlineCommentPluginKey.getState(editorView.state) || {},
+        _draftDecorationSet = _ref3.draftDecorationSet;
+      var _decorations = _draftDecorationSet === null || _draftDecorationSet === void 0 ? void 0 : _draftDecorationSet.find();
+      if (!(_decorations !== null && _decorations !== void 0 && _decorations.length)) {
+        return {
+          success: false,
+          reason: ERROR_REASON_RANGE_INVALID
+        };
+      }
+      var _from = _decorations[0].from;
+      var _targetElement = domRefFromPos(editorView, _from);
+      var _inlineNodeTypes = (_getRangeInlineNodeNa = getRangeInlineNodeNames({
+        doc: editorView.state.doc,
+        pos: {
+          from: _from,
+          to: _decorations[_decorations.length - 1].to
+        }
+      })) !== null && _getRangeInlineNodeNa !== void 0 ? _getRangeInlineNodeNa : [];
+      var targetNodeType = target.node.type.name;
+      (_options$annotationMa2 = options.annotationManager) === null || _options$annotationMa2 === void 0 || _options$annotationMa2.emit({
+        name: 'draftAnnotationStarted',
+        data: {
+          targetElement: _targetElement,
+          actionResult: undefined,
+          inlineNodeTypes: _inlineNodeTypes,
+          targetNodeType: targetNodeType
+        }
+      });
+      return {
+        success: true,
+        targetElement: _targetElement,
+        // In Editor the action result is undefined, because the editor will perform the transaction on the document.
+        actionResult: undefined,
+        inlineNodeTypes: _inlineNodeTypes,
+        targetNodeType: targetNodeType
+      };
+    }
     setInlineCommentDraftState(options.editorAnalyticsAPI, options.provider.supportedBlockNodes, options.api, options.provider.isBlockNodeSupported)(true)(editorView.state, editorView.dispatch);
-    var _ref3 = inlineCommentPluginKey.getState(editorView.state) || {},
-      draftDecorationSet = _ref3.draftDecorationSet;
+    var _ref4 = inlineCommentPluginKey.getState(editorView.state) || {},
+      draftDecorationSet = _ref4.draftDecorationSet;
     var decorations = draftDecorationSet === null || draftDecorationSet === void 0 ? void 0 : draftDecorationSet.find();
 
     // If the matching decorations is not found containing the id, it means something went wrong with the draft.
@@ -83,14 +149,14 @@ export var startDraft = function startDraft(editorView, options) {
     }
     var from = decorations[0].from;
     var targetElement = domRefFromPos(editorView, from);
-    var inlineNodeTypes = (_getRangeInlineNodeNa = getRangeInlineNodeNames({
+    var inlineNodeTypes = (_getRangeInlineNodeNa2 = getRangeInlineNodeNames({
       doc: editorView.state.doc,
       pos: {
         from: from,
         to: decorations[decorations.length - 1].to
       }
-    })) !== null && _getRangeInlineNodeNa !== void 0 ? _getRangeInlineNodeNa : [];
-    (_options$annotationMa2 = options.annotationManager) === null || _options$annotationMa2 === void 0 || _options$annotationMa2.emit({
+    })) !== null && _getRangeInlineNodeNa2 !== void 0 ? _getRangeInlineNodeNa2 : [];
+    (_options$annotationMa3 = options.annotationManager) === null || _options$annotationMa3 === void 0 || _options$annotationMa3.emit({
       name: 'draftAnnotationStarted',
       data: {
         targetElement: targetElement,
@@ -109,9 +175,10 @@ export var startDraft = function startDraft(editorView, options) {
 };
 export var clearDraft = function clearDraft(editorView, options) {
   return function () {
-    var _ref4 = inlineCommentPluginKey.getState(editorView.state) || {},
-      isDrafting = _ref4.isDrafting,
-      draftDecorationSet = _ref4.draftDecorationSet;
+    var _options$annotationMa4;
+    var _ref5 = inlineCommentPluginKey.getState(editorView.state) || {},
+      isDrafting = _ref5.isDrafting,
+      draftDecorationSet = _ref5.draftDecorationSet;
     if (!isDrafting) {
       return {
         success: false,
@@ -127,6 +194,9 @@ export var clearDraft = function clearDraft(editorView, options) {
     }
     setInlineCommentDraftState(options.editorAnalyticsAPI, undefined, options.api)(false)(editorView.state, editorView.dispatch);
     !editorView.hasFocus() && editorView.focus();
+    (_options$annotationMa4 = options.annotationManager) === null || _options$annotationMa4 === void 0 || _options$annotationMa4.emit({
+      name: 'draftAnnotationCleared'
+    });
     return {
       success: true
     };
@@ -134,11 +204,11 @@ export var clearDraft = function clearDraft(editorView, options) {
 };
 export var applyDraft = function applyDraft(editorView, options) {
   return function (id) {
-    var _options$annotationMa3, _getAnnotationInlineN2;
-    var _ref5 = inlineCommentPluginKey.getState(editorView.state) || {},
-      isDrafting = _ref5.isDrafting,
-      draftDecorationSet = _ref5.draftDecorationSet,
-      bookmark = _ref5.bookmark;
+    var _options$annotationMa5, _getAnnotationInlineN2;
+    var _ref6 = inlineCommentPluginKey.getState(editorView.state) || {},
+      isDrafting = _ref6.isDrafting,
+      draftDecorationSet = _ref6.draftDecorationSet,
+      bookmark = _ref6.bookmark;
     if (!isDrafting) {
       return {
         success: false,
@@ -162,7 +232,7 @@ export var applyDraft = function applyDraft(editorView, options) {
 
     // When a draft is applied it is automatically selected, so we need to set the selected annotation.
     // emit the event for the selected annotation.
-    (_options$annotationMa3 = options.annotationManager) === null || _options$annotationMa3 === void 0 || _options$annotationMa3.emit({
+    (_options$annotationMa5 = options.annotationManager) === null || _options$annotationMa5 === void 0 || _options$annotationMa5.emit({
       name: 'annotationSelectionChanged',
       data: {
         annotationId: id,
@@ -181,10 +251,10 @@ export var applyDraft = function applyDraft(editorView, options) {
 };
 export var getDraft = function getDraft(editorView, _options) {
   return function () {
-    var _getRangeInlineNodeNa2;
-    var _ref6 = inlineCommentPluginKey.getState(editorView.state) || {},
-      isDrafting = _ref6.isDrafting,
-      draftDecorationSet = _ref6.draftDecorationSet;
+    var _getRangeInlineNodeNa3;
+    var _ref7 = inlineCommentPluginKey.getState(editorView.state) || {},
+      isDrafting = _ref7.isDrafting,
+      draftDecorationSet = _ref7.draftDecorationSet;
     if (!isDrafting) {
       return {
         success: false,
@@ -200,13 +270,13 @@ export var getDraft = function getDraft(editorView, _options) {
     }
     var from = decorations[0].from;
     var targetElement = domRefFromPos(editorView, from);
-    var inlineNodeTypes = (_getRangeInlineNodeNa2 = getRangeInlineNodeNames({
+    var inlineNodeTypes = (_getRangeInlineNodeNa3 = getRangeInlineNodeNames({
       doc: editorView.state.doc,
       pos: {
         from: from,
         to: decorations[decorations.length - 1].to
       }
-    })) !== null && _getRangeInlineNodeNa2 !== void 0 ? _getRangeInlineNodeNa2 : [];
+    })) !== null && _getRangeInlineNodeNa3 !== void 0 ? _getRangeInlineNodeNa3 : [];
     return {
       success: true,
       inlineNodeTypes: inlineNodeTypes,
@@ -218,10 +288,10 @@ export var getDraft = function getDraft(editorView, _options) {
 export var setIsAnnotationSelected = function setIsAnnotationSelected(editorView, options) {
   return function (id, isSelected) {
     var _selectedAnnotations$;
-    var _ref7 = inlineCommentPluginKey.getState(editorView.state) || {},
-      annotations = _ref7.annotations,
-      isDrafting = _ref7.isDrafting,
-      selectedAnnotations = _ref7.selectedAnnotations;
+    var _ref8 = inlineCommentPluginKey.getState(editorView.state) || {},
+      annotations = _ref8.annotations,
+      isDrafting = _ref8.isDrafting,
+      selectedAnnotations = _ref8.selectedAnnotations;
     if (isDrafting) {
       return {
         success: false,
@@ -243,10 +313,10 @@ export var setIsAnnotationSelected = function setIsAnnotationSelected(editorView
     if (isSelected !== isCurrentlySelected) {
       // the annotation is selection is changing.
       if (isCurrentlySelected && !isSelected) {
-        var _options$annotationMa4, _getAnnotationInlineN3;
+        var _options$annotationMa6, _getAnnotationInlineN3;
         // the selected annotaion is being unselected, so we need to close the view.
         closeComponent()(editorView.state, editorView.dispatch);
-        (_options$annotationMa4 = options.annotationManager) === null || _options$annotationMa4 === void 0 || _options$annotationMa4.emit({
+        (_options$annotationMa6 = options.annotationManager) === null || _options$annotationMa6 === void 0 || _options$annotationMa6.emit({
           name: 'annotationSelectionChanged',
           data: {
             annotationId: id,
@@ -255,15 +325,15 @@ export var setIsAnnotationSelected = function setIsAnnotationSelected(editorView
           }
         });
       } else if (!isCurrentlySelected && isSelected) {
-        var _options$annotationMa6, _getAnnotationInlineN5;
+        var _options$annotationMa8, _getAnnotationInlineN5;
         // the annotation is currently not selected and is being selected, so we need to open the view.
         setSelectedAnnotation(id)(editorView.state, editorView.dispatch);
 
         // the current annotations are going to be unselected. So we need to notify listeners of this change also.
         selectedAnnotations === null || selectedAnnotations === void 0 || selectedAnnotations.forEach(function (annotation) {
           if (annotation.id !== id) {
-            var _options$annotationMa5, _getAnnotationInlineN4;
-            (_options$annotationMa5 = options.annotationManager) === null || _options$annotationMa5 === void 0 || _options$annotationMa5.emit({
+            var _options$annotationMa7, _getAnnotationInlineN4;
+            (_options$annotationMa7 = options.annotationManager) === null || _options$annotationMa7 === void 0 || _options$annotationMa7.emit({
               name: 'annotationSelectionChanged',
               data: {
                 annotationId: annotation.id,
@@ -275,7 +345,7 @@ export var setIsAnnotationSelected = function setIsAnnotationSelected(editorView
         });
 
         // Lastly we need to emit the event for the selected annotation.
-        (_options$annotationMa6 = options.annotationManager) === null || _options$annotationMa6 === void 0 || _options$annotationMa6.emit({
+        (_options$annotationMa8 = options.annotationManager) === null || _options$annotationMa8 === void 0 || _options$annotationMa8.emit({
           name: 'annotationSelectionChanged',
           data: {
             annotationId: id,
@@ -294,9 +364,9 @@ export var setIsAnnotationSelected = function setIsAnnotationSelected(editorView
 export var setIsAnnotationHovered = function setIsAnnotationHovered(editorView, _options) {
   return function (id, isHovered) {
     var _hoveredAnnotations$f;
-    var _ref8 = inlineCommentPluginKey.getState(editorView.state) || {},
-      annotations = _ref8.annotations,
-      hoveredAnnotations = _ref8.hoveredAnnotations;
+    var _ref9 = inlineCommentPluginKey.getState(editorView.state) || {},
+      annotations = _ref9.annotations,
+      hoveredAnnotations = _ref9.hoveredAnnotations;
 
     // If there is no annotation state with this id then we can assume the annotation is invalid.
     if (!(annotations !== null && annotations !== void 0 && annotations.hasOwnProperty(id))) {
@@ -327,8 +397,8 @@ export var setIsAnnotationHovered = function setIsAnnotationHovered(editorView,
 };
 export var clearAnnotation = function clearAnnotation(editorView, options) {
   return function (id) {
-    var _ref9 = inlineCommentPluginKey.getState(editorView.state) || {},
-      annotations = _ref9.annotations;
+    var _ref0 = inlineCommentPluginKey.getState(editorView.state) || {},
+      annotations = _ref0.annotations;
 
     // If there is no annotation state with this id then we can assume the annotation is invalid.
     if (!(annotations !== null && annotations !== void 0 && annotations.hasOwnProperty(id))) {