@atlaskit/editor-plugin-annotation 27.0.6 → 28.1.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/editor-plugin-annotation
 
+## 28.1.0
+
+### Minor Changes
+
+- [`0dacb94545d03`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0dacb94545d03) -
+  Behind cc_maui_annotations_on_extensions: fire the cc_maui_comments_on_charts_exp exposure only
+  where the chart Comment button can show. Adds an optional viewModeEditorToolbarItems UiConfig
+  hook, used by MAUI charts to show Comment in the view-mode toolbar (live pages), and a
+  getAddCommentPermission annotation plugin action, used to disable the chart Comment button without
+  comment permission. The full-page renderer checks extension comment creation on first hover or
+  focus instead of while rendering.
+- [`98f39b65e08a9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/98f39b65e08a9) -
+  Track new Remix inline comment drafts through the configured creation experience under
+  cc_maui_annotations_on_extensions.
+
+## 28.0.0
+
+### Minor Changes
+
+- [`ebf585edb7bcc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ebf585edb7bcc) -
+  Support starting an annotation draft on a block node, behind
+  `platform_editor_comments_api_manager`.
+  - The `startDraft` manager hook accepts an optional `localId`. It resolves the target through
+    `resolveAnnotatableTargetFromLocalId`, selects the node ProseMirror can select (a `media` node's
+    `mediaSingle` parent), starts a block draft, and reports `targetNodeType` on both the result and
+    the `draftAnnotationStarted` event. An unresolvable `localId` fails with `invalid-localId` and
+    leaves the document untouched.
+  - `clearDraft` now emits `draftAnnotationCleared`.
+  - The annotation plugin's shared state exposes `annotationManager`, so other plugins (media) can
+    drive the manager without the provider being threaded through them.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 27.0.6
 
 ### Patch Changes

package/dist/cjs/annotationPlugin.js

@@ -97,6 +97,13 @@ var annotationPlugin = exports.annotationPlugin = function annotationPlugin(_ref
         var _annotationProviders$, _annotationProviders$2;
         return (0, _fg.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: _utils.hasAnyUnResolvedAnnotationInPage,
       requestCloseInlineComment: requestCloseInlineComment,
       stripNonExistingAnnotations: _utils.stripNonExistingAnnotations,
@@ -105,10 +112,10 @@ var annotationPlugin = exports.annotationPlugin = function annotationPlugin(_ref
         return (0, _editorCommands.createAnnotation)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api)(annotationId, _annotation.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 (0, _editorCommands.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 (0, _editorCommands.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: (0, _editorCommands.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: (0, _editorCommands.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: (0, _editorCommands.showInlineCommentForBlockNode)(annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.supportedBlockNodes, annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.isBlockNodeSupported),
       setSelectedAnnotation: _editorCommands.setSelectedAnnotation,
       setPendingSelectedAnnotation: _editorCommands.setPendingSelectedAnnotation
@@ -120,7 +127,9 @@ var annotationPlugin = exports.annotationPlugin = function annotationPlugin(_ref
       var pluginState = (0, _utils.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 [{
@@ -173,11 +182,11 @@ var annotationPlugin = exports.annotationPlugin = function annotationPlugin(_ref
         var pluginState = (0, _utils.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 = (0, _toolbar.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/cjs/editor-commands/index.js

@@ -9,7 +9,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _annotation = require("@atlaskit/adf-schema/annotation");
 var _enums = require("@atlaskit/editor-common/analytics/types/enums");
 var _inlineCommentEvents = require("@atlaskit/editor-common/analytics/types/inline-comment-events");
+var _manifestHelpers = require("@atlaskit/editor-common/extensions/manifest-helpers");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _types = require("../pm-plugins/types");
 var _utils = require("../pm-plugins/utils");
@@ -250,16 +252,35 @@ var setInlineCommentDraftState = exports.setInlineCommentDraftState = function s
   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] : _enums.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.default.handleDraftState(editorAnalyticsAPI)(drafting, inputMethod)(state.tr, state);
+    var draftCommand = !(api !== null && api !== void 0 && api.toolbar) ? (0, _pluginFactory.createCommand)(commandAction, _transform.default.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 _state.NodeSelection && state.selection.node.type.name === 'extension' && state.selection.node.attrs.extensionKey === "".concat(_manifestHelpers.NATIVE_EMBED_EXTENSION_KEY, ":maui") && (0, _fg.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.default.handleDraftState(editorAnalyticsAPI)(drafting, inputMethod)(state.tr, state);
         if (tr && newPluginState) {
           tr.setMeta(_utils.inlineCommentPluginKey, newPluginState);
           if (drafting) {
@@ -267,17 +288,16 @@ var setInlineCommentDraftState = exports.setInlineCommentDraftState = function s
           } else {
             (0, _utils2.resetUserIntent)(api, tr);
           }
-          if (dispatch) {
-            dispatch(tr);
+          if (dispatchDraft) {
+            dispatchDraft(tr);
           }
         } else {
           return false;
         }
         return true;
-      };
-    } else {
-      return (0, _pluginFactory.createCommand)(commandAction, _transform.default.handleDraftState(editorAnalyticsAPI)(drafting, inputMethod));
-    }
+      }
+      return draftCommand ? draftCommand(state, dispatchDraft, view) : false;
+    };
   };
 };
 var addInlineComment = exports.addInlineComment = function addInlineComment(editorAnalyticsAPI, editorAPI) {

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

@@ -5,16 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.startDraft = exports.setIsAnnotationSelected = exports.setIsAnnotationHovered = exports.getDraft = exports.clearDraft = exports.clearAnnotation = exports.applyDraft = exports.allowAnnotation = void 0;
 var _annotation = require("@atlaskit/adf-schema/annotation");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _annotation2 = require("@atlaskit/editor-common/utils/annotation");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorCommands = require("../editor-commands");
 var _types = require("../types");
+var _resolveAnnotatableTarget = require("./resolve-annotatable-target");
 var _utils2 = require("./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 {
@@ -46,8 +50,8 @@ var allowAnnotation = exports.allowAnnotation = function allowAnnotation(editorV
   };
 };
 var startDraft = exports.startDraft = function startDraft(editorView, options) {
-  return function () {
-    var _getRangeInlineNodeNa, _options$annotationMa2;
+  return function (localId) {
+    var _getRangeInlineNodeNa2, _options$annotationMa3;
     var _ref2 = _utils2.inlineCommentPluginKey.getState(editorView.state) || {},
       isDrafting = _ref2.isDrafting,
       selectedAnnotations = _ref2.selectedAnnotations;
@@ -75,9 +79,71 @@ var startDraft = exports.startDraft = function startDraft(editorView, options) {
         });
       });
     }
+    if (localId !== undefined) {
+      var _$target$parent, _target$node$attrs$id, _getRangeInlineNodeNa, _options$annotationMa2;
+      var target = (0, _resolveAnnotatableTarget.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(_state.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;
+      (0, _editorCommands.setInlineCommentDraftState)(options.editorAnalyticsAPI, options.provider.supportedBlockNodes, options.api, options.provider.isBlockNodeSupported)(true, _analytics.INPUT_METHOD.FLOATING_TB, 'block', targetNodeId, true)(editorView.state, editorView.dispatch);
+      var _ref3 = _utils2.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 = (0, _annotation2.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
+      };
+    }
     (0, _editorCommands.setInlineCommentDraftState)(options.editorAnalyticsAPI, options.provider.supportedBlockNodes, options.api, options.provider.isBlockNodeSupported)(true)(editorView.state, editorView.dispatch);
-    var _ref3 = _utils2.inlineCommentPluginKey.getState(editorView.state) || {},
-      draftDecorationSet = _ref3.draftDecorationSet;
+    var _ref4 = _utils2.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.
@@ -89,14 +155,14 @@ var startDraft = exports.startDraft = function startDraft(editorView, options) {
     }
     var from = decorations[0].from;
     var targetElement = domRefFromPos(editorView, from);
-    var inlineNodeTypes = (_getRangeInlineNodeNa = (0, _annotation2.getRangeInlineNodeNames)({
+    var inlineNodeTypes = (_getRangeInlineNodeNa2 = (0, _annotation2.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,
@@ -115,9 +181,10 @@ var startDraft = exports.startDraft = function startDraft(editorView, options) {
 };
 var clearDraft = exports.clearDraft = function clearDraft(editorView, options) {
   return function () {
-    var _ref4 = _utils2.inlineCommentPluginKey.getState(editorView.state) || {},
-      isDrafting = _ref4.isDrafting,
-      draftDecorationSet = _ref4.draftDecorationSet;
+    var _options$annotationMa4;
+    var _ref5 = _utils2.inlineCommentPluginKey.getState(editorView.state) || {},
+      isDrafting = _ref5.isDrafting,
+      draftDecorationSet = _ref5.draftDecorationSet;
     if (!isDrafting) {
       return {
         success: false,
@@ -133,6 +200,9 @@ var clearDraft = exports.clearDraft = function clearDraft(editorView, options) {
     }
     (0, _editorCommands.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
     };
@@ -140,11 +210,11 @@ var clearDraft = exports.clearDraft = function clearDraft(editorView, options) {
 };
 var applyDraft = exports.applyDraft = function applyDraft(editorView, options) {
   return function (id) {
-    var _options$annotationMa3, _getAnnotationInlineN2;
-    var _ref5 = _utils2.inlineCommentPluginKey.getState(editorView.state) || {},
-      isDrafting = _ref5.isDrafting,
-      draftDecorationSet = _ref5.draftDecorationSet,
-      bookmark = _ref5.bookmark;
+    var _options$annotationMa5, _getAnnotationInlineN2;
+    var _ref6 = _utils2.inlineCommentPluginKey.getState(editorView.state) || {},
+      isDrafting = _ref6.isDrafting,
+      draftDecorationSet = _ref6.draftDecorationSet,
+      bookmark = _ref6.bookmark;
     if (!isDrafting) {
       return {
         success: false,
@@ -168,7 +238,7 @@ var applyDraft = exports.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,
@@ -187,10 +257,10 @@ var applyDraft = exports.applyDraft = function applyDraft(editorView, options) {
 };
 var getDraft = exports.getDraft = function getDraft(editorView, _options) {
   return function () {
-    var _getRangeInlineNodeNa2;
-    var _ref6 = _utils2.inlineCommentPluginKey.getState(editorView.state) || {},
-      isDrafting = _ref6.isDrafting,
-      draftDecorationSet = _ref6.draftDecorationSet;
+    var _getRangeInlineNodeNa3;
+    var _ref7 = _utils2.inlineCommentPluginKey.getState(editorView.state) || {},
+      isDrafting = _ref7.isDrafting,
+      draftDecorationSet = _ref7.draftDecorationSet;
     if (!isDrafting) {
       return {
         success: false,
@@ -206,13 +276,13 @@ var getDraft = exports.getDraft = function getDraft(editorView, _options) {
     }
     var from = decorations[0].from;
     var targetElement = domRefFromPos(editorView, from);
-    var inlineNodeTypes = (_getRangeInlineNodeNa2 = (0, _annotation2.getRangeInlineNodeNames)({
+    var inlineNodeTypes = (_getRangeInlineNodeNa3 = (0, _annotation2.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,
@@ -224,10 +294,10 @@ var getDraft = exports.getDraft = function getDraft(editorView, _options) {
 var setIsAnnotationSelected = exports.setIsAnnotationSelected = function setIsAnnotationSelected(editorView, options) {
   return function (id, isSelected) {
     var _selectedAnnotations$;
-    var _ref7 = _utils2.inlineCommentPluginKey.getState(editorView.state) || {},
-      annotations = _ref7.annotations,
-      isDrafting = _ref7.isDrafting,
-      selectedAnnotations = _ref7.selectedAnnotations;
+    var _ref8 = _utils2.inlineCommentPluginKey.getState(editorView.state) || {},
+      annotations = _ref8.annotations,
+      isDrafting = _ref8.isDrafting,
+      selectedAnnotations = _ref8.selectedAnnotations;
     if (isDrafting) {
       return {
         success: false,
@@ -249,10 +319,10 @@ var setIsAnnotationSelected = exports.setIsAnnotationSelected = function setIsAn
     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.
         (0, _editorCommands.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,
@@ -261,15 +331,15 @@ var setIsAnnotationSelected = exports.setIsAnnotationSelected = function setIsAn
           }
         });
       } 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.
         (0, _editorCommands.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,
@@ -281,7 +351,7 @@ var setIsAnnotationSelected = exports.setIsAnnotationSelected = function setIsAn
         });
 
         // 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,
@@ -300,9 +370,9 @@ var setIsAnnotationSelected = exports.setIsAnnotationSelected = function setIsAn
 var setIsAnnotationHovered = exports.setIsAnnotationHovered = function setIsAnnotationHovered(editorView, _options) {
   return function (id, isHovered) {
     var _hoveredAnnotations$f;
-    var _ref8 = _utils2.inlineCommentPluginKey.getState(editorView.state) || {},
-      annotations = _ref8.annotations,
-      hoveredAnnotations = _ref8.hoveredAnnotations;
+    var _ref9 = _utils2.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))) {
@@ -333,8 +403,8 @@ var setIsAnnotationHovered = exports.setIsAnnotationHovered = function setIsAnno
 };
 var clearAnnotation = exports.clearAnnotation = function clearAnnotation(editorView, options) {
   return function (id) {
-    var _ref9 = _utils2.inlineCommentPluginKey.getState(editorView.state) || {},
-      annotations = _ref9.annotations;
+    var _ref0 = _utils2.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))) {

package/dist/es2019/annotationPlugin.js

@@ -65,6 +65,13 @@ export const annotationPlugin = ({
         var _annotationProviders$, _annotationProviders$2;
         return fg('cc_maui_annotations_on_extensions') && (annotationProviders === null || annotationProviders === void 0 ? void 0 : (_annotationProviders$ = (_annotationProviders$2 = annotationProviders.inlineComment).isBlockNodeSupported) === null || _annotationProviders$ === void 0 ? void 0 : _annotationProviders$.call(_annotationProviders$2, node)) === true;
       },
+      getAddCommentPermission: () => {
+        var _annotationProviders$3, _annotationProviders$4, _annotationProviders$5;
+        return {
+          canAddComments: (_annotationProviders$3 = annotationProviders === null || annotationProviders === void 0 ? 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,
       requestCloseInlineComment,
       stripNonExistingAnnotations,
@@ -73,10 +80,10 @@ export const annotationPlugin = ({
         return createAnnotation(api === null || api === void 0 ? 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: annotationId => {
-        var _api$analytics2, _annotationProviders$3;
-        return removeInlineCommentFromDoc(api === null || api === void 0 ? 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 ? 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 ? 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 ? 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,
       setPendingSelectedAnnotation
@@ -88,7 +95,10 @@ export const annotationPlugin = ({
       const pluginState = getPluginState(editorState) || undefined;
       const clonedPluginState = Object.assign({}, pluginState);
       clonedPluginState === null || clonedPluginState === void 0 ? true : delete clonedPluginState.featureFlagsPluginState;
-      return clonedPluginState;
+      return {
+        ...clonedPluginState,
+        annotationManager: annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.annotationManager
+      };
     },
     pmPlugins: () => [{
       name: 'annotation',

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

@@ -3,7 +3,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';
@@ -204,12 +206,30 @@ export const showInlineCommentForBlockNode = (supportedBlockNodes = [], isBlockN
   }
   return false;
 };
-export const setInlineCommentDraftState = (editorAnalyticsAPI, supportedBlockNodes = [], api, isBlockNodeSupported) => (drafting, inputMethod = INPUT_METHOD.TOOLBAR, targetType = 'inline', targetNodeId = undefined, isOpeningMediaCommentFromToolbar) => {
+export const setInlineCommentDraftState = (editorAnalyticsAPI, supportedBlockNodes = [], api, isBlockNodeSupported, createCommentExperience) => (drafting, inputMethod = INPUT_METHOD.TOOLBAR, targetType = 'inline', targetNodeId = undefined, isOpeningMediaCommentFromToolbar) => {
   const commandAction = getDraftCommandAction(drafting, targetType, targetNodeId, supportedBlockNodes, isBlockNodeSupported, isOpeningMediaCommentFromToolbar);
-  if (Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) {
-    return (state, dispatch) => {
-      const tr = transform.handleDraftState(editorAnalyticsAPI)(drafting, inputMethod)(state.tr, state);
+  const draftCommand = !(api !== null && api !== void 0 && api.toolbar) ? createCommand(commandAction, transform.handleDraftState(editorAnalyticsAPI)(drafting, inputMethod)) : undefined;
+  return (state, dispatch, view) => {
+    // Start tracking only when a valid draft is dispatched, never during dry runs.
+    const dispatchDraft = dispatch && drafting && targetType === 'block' && state.selection instanceof NodeSelection && state.selection.node.type.name === 'extension' && state.selection.node.attrs.extensionKey === `${NATIVE_EMBED_EXTENSION_KEY}:maui` && fg('cc_maui_annotations_on_extensions') ? tr => {
+      createCommentExperience === null || createCommentExperience === void 0 ? void 0 : createCommentExperience.start({
+        attributes: {
+          pageClass: 'editor',
+          commentType: 'block',
+          blockType: 'extension',
+          commentTargetType: 'remixEmbed',
+          entryPoint: 'highlightActions'
+        }
+      });
+      createCommentExperience === null || createCommentExperience === void 0 ? void 0 : createCommentExperience.initExperience.start();
+      dispatch(tr);
+    } : dispatch;
+    if (Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) {
       const newPluginState = commandAction(state);
+      if (!newPluginState) {
+        return false;
+      }
+      const tr = transform.handleDraftState(editorAnalyticsAPI)(drafting, inputMethod)(state.tr, state);
       if (tr && newPluginState) {
         tr.setMeta(inlineCommentPluginKey, newPluginState);
         if (drafting) {
@@ -217,17 +237,16 @@ export const setInlineCommentDraftState = (editorAnalyticsAPI, supportedBlockNod
         } 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 const addInlineComment = (editorAnalyticsAPI, editorAPI) => (id, supportedBlockNodes, isBlockNodeSupported) => {
   const commandAction = editorState => ({