@atlaskit/editor-plugin-annotation 1.21.3 → 1.23.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-annotation
 
+## 1.23.0
+
+### Minor Changes
+
+- [#152319](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152319)
+  [`bfa9c49e1928b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bfa9c49e1928b) -
+  [ux] Added a check to handle the case where a single non-breaking space is selected and the user
+  attempts to leave a comment on it.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.22.0
+
+### Minor Changes
+
+- [#157867](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157867)
+  [`8398a1f0013fc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8398a1f0013fc) -
+  [ux] ED-25331-add-spotlight-to-inline-comment-button
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.21.3
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -88,7 +88,13 @@ var annotationPlugin = exports.annotationPlugin = function annotationPlugin(_ref
         if (pluginState && pluginState.isVisible && !pluginState.bookmark && !pluginState.mouseData.isSelecting) {
           var _api$analytics4;
           var isToolbarAbove = annotationProviders.inlineComment.isToolbarAbove;
-          return (0, _toolbar.buildToolbar)(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(state, intl, isToolbarAbove, featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia);
+          return (0, _toolbar.buildToolbar)(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)({
+            state: state,
+            intl: intl,
+            isToolbarAbove: isToolbarAbove,
+            isCommentOnMediaOn: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia,
+            api: api
+          });
         }
       }
     },

package/dist/cjs/toolbar.js

@@ -14,14 +14,51 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
 var _comment2 = _interopRequireDefault(require("@atlaskit/icon/glyph/comment"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("./commands");
 var _types = require("./types");
 var _utils2 = require("./utils");
+var INLINE_COMMENT_ON_INLINE_NODE_SPOTLIGHT_EP_MESSAGE_ID = 'inline-comments-on-inline-node-spotlight';
+var createSpotlightConfig = function createSpotlightConfig(_ref) {
+  var _api$engagementPlatfo;
+  var api = _ref.api,
+    intl = _ref.intl;
+  var isUserEnrolledInEpAudience = !!(api !== null && api !== void 0 && (_api$engagementPlatfo = api.engagementPlatform) !== null && _api$engagementPlatfo !== void 0 && (_api$engagementPlatfo = _api$engagementPlatfo.sharedState.currentState()) !== null && _api$engagementPlatfo !== void 0 && _api$engagementPlatfo.messageStates[INLINE_COMMENT_ON_INLINE_NODE_SPOTLIGHT_EP_MESSAGE_ID]);
+  // Ensure experiment is only ran on users who are in the EP audience
+  var isSpotlightOpen = isUserEnrolledInEpAudience && (0, _experiments.editorExperiment)('comment_on_inline_node_spotlight', true, {
+    exposure: true
+  });
+  var stopSpotlight = function stopSpotlight() {
+    var _api$engagementPlatfo2;
+    return api === null || api === void 0 || (_api$engagementPlatfo2 = api.engagementPlatform) === null || _api$engagementPlatfo2 === void 0 ? void 0 : _api$engagementPlatfo2.actions.stopMessage(INLINE_COMMENT_ON_INLINE_NODE_SPOTLIGHT_EP_MESSAGE_ID);
+  };
+  return {
+    isSpotlightOpen: isSpotlightOpen,
+    pulse: isSpotlightOpen,
+    onTargetClick: stopSpotlight,
+    spotlightCardOptions: {
+      children: intl.formatMessage(_messages.annotationMessages.createCommentOnInlineNodeSpotlightBody),
+      actions: [{
+        text: intl.formatMessage(_messages.annotationMessages.createCommentOnInlineNodeSpotlightAction),
+        onClick: function onClick() {
+          return stopSpotlight();
+        }
+      }],
+      placement: 'top-start',
+      width: 275
+    }
+  };
+};
 var buildToolbar = exports.buildToolbar = function buildToolbar(editorAnalyticsAPI) {
-  return function (state, intl) {
-    var isToolbarAbove = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    var isCommentOnMediaOn = arguments.length > 3 ? arguments[3] : undefined;
-    var _supportedNodes = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+  return function (_ref2) {
+    var state = _ref2.state,
+      intl = _ref2.intl,
+      _ref2$isToolbarAbove = _ref2.isToolbarAbove,
+      isToolbarAbove = _ref2$isToolbarAbove === void 0 ? false : _ref2$isToolbarAbove,
+      isCommentOnMediaOn = _ref2.isCommentOnMediaOn,
+      _ref2$_supportedNodes = _ref2._supportedNodes,
+      _supportedNodes = _ref2$_supportedNodes === void 0 ? [] : _ref2$_supportedNodes,
+      api = _ref2.api;
     var schema = state.schema;
     var selectionValid = (0, _utils2.isSelectionValid)(state, isCommentOnMediaOn);
     var isMediaSelected = isCommentOnMediaOn && (0, _mediaSingle.currentMediaNodeWithPos)(state);
@@ -62,11 +99,6 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(editorAnalyticsA
             actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
             eventType: _analytics.EVENT_TYPE.UI,
             attributes: {
-              /**
-               * This attribute is used as the trigger to display an engagement platform promotion message
-               * when isNonTextInlineNodeInludedInComment is true, and isDisabled is false,
-               * A spotlight/flag will be shown to the user to encourage them to comment on inline nodes.
-               */
               isNonTextInlineNodeInludedInComment: isNonTextInlineNodeInludedInComment,
               isDisabled: selectionValid === _types.AnnotationSelectionType.DISABLED,
               inputMethod: _analytics.INPUT_METHOD.FLOATING_TB,
@@ -74,6 +106,23 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(editorAnalyticsA
             }
           });
         }
+
+        /* When a user selects a valid range of content that includes non-text inline node (e.g. media, mention, emoji, etc.)
+            * Attempt to fire a spotlight to guide the user to create an inline comment on the inline node.
+         * The spotlight will only be displayed if the user is a valid EP audience and the feature flag is enabled.
+        */
+        if (isNonTextInlineNodeInludedInComment && selectionValid === _types.AnnotationSelectionType.VALID && (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes_spotlight')) {
+          var _api$engagementPlatfo3;
+          api === null || api === void 0 || (_api$engagementPlatfo3 = api.engagementPlatform) === null || _api$engagementPlatfo3 === void 0 || _api$engagementPlatfo3.actions.startMessage('inline-comments-on-inline-node-spotlight');
+        }
+      },
+      onUnmount: function onUnmount() {
+        var _api$engagementPlatfo4;
+        // if enagement spotlight is still active, stop it
+        if (api !== null && api !== void 0 && (_api$engagementPlatfo4 = api.engagementPlatform) !== null && _api$engagementPlatfo4 !== void 0 && (_api$engagementPlatfo4 = _api$engagementPlatfo4.sharedState.currentState()) !== null && _api$engagementPlatfo4 !== void 0 && _api$engagementPlatfo4.messageStates[INLINE_COMMENT_ON_INLINE_NODE_SPOTLIGHT_EP_MESSAGE_ID]) {
+          var _api$engagementPlatfo5;
+          api === null || api === void 0 || (_api$engagementPlatfo5 = api.engagementPlatform) === null || _api$engagementPlatfo5 === void 0 || _api$engagementPlatfo5.actions.stopMessage(INLINE_COMMENT_ON_INLINE_NODE_SPOTLIGHT_EP_MESSAGE_ID);
+        }
       },
       onClick: function onClick(state, dispatch) {
         if (editorAnalyticsAPI) {
@@ -92,7 +141,12 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(editorAnalyticsA
         }
         return (0, _commands.setInlineCommentDraftState)(editorAnalyticsAPI)(true)(state, dispatch);
       },
-      supportsViewMode: true // TODO: MODES-3950 Clean up this floating toolbar view mode logic
+      supportsViewMode: true,
+      // TODO: MODES-3950 Clean up this floating toolbar view mode logic,
+      spotlightConfig: createSpotlightConfig({
+        api: api,
+        intl: intl
+      })
     };
     var annotation = schema.marks.annotation;
     var validNodes = Object.keys(schema.nodes).reduce(function (acc, current) {

package/dist/cjs/utils.js

@@ -342,7 +342,7 @@ var isSelectionValid = exports.isSelectionValid = function isSelectionValid(stat
   if (disallowOnWhitespace && hasInvalidWhitespaceNode(selection, state.schema)) {
     return _types.AnnotationSelectionType.INVALID;
   }
-  if (isEmptyTextSelection(selection, state.schema)) {
+  if ((0, _utils.isEmptyTextSelection)(selection, state.schema)) {
     return _types.AnnotationSelectionType.INVALID;
   }
   return _types.AnnotationSelectionType.VALID;
@@ -356,29 +356,6 @@ var hasInvalidNodes = exports.hasInvalidNodes = function hasInvalidNodes(state)
     to: selection.to
   }, doc, schema);
 };
-
-/**
- * Checks if selection contains only empty text
- * e.g. when you select across multiple empty paragraphs
- */
-function isEmptyTextSelection(selection, schema) {
-  var _schema$nodes = schema.nodes,
-    text = _schema$nodes.text,
-    paragraph = _schema$nodes.paragraph;
-  var hasContent = false;
-  selection.content().content.descendants(function (node) {
-    // for empty paragraph - consider empty (nothing to comment on)
-    if (node.type === paragraph && !node.content.size) {
-      return false;
-    }
-    // for not a text or nonempty text - consider nonempty (can comment if the node is supported for annotations)
-    if (node.type !== text || !node.textContent) {
-      hasContent = true;
-    }
-    return !hasContent;
-  });
-  return !hasContent;
-}
 var isSupportedBlockNode = exports.isSupportedBlockNode = function isSupportedBlockNode(node) {
   var supportedBlockNodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   return supportedBlockNodes.indexOf(node.type.name) >= 0 || node.type.name === 'mediaSingle' && supportedBlockNodes.indexOf('media') >= 0;

package/dist/es2019/plugin.js

@@ -77,7 +77,13 @@ export const annotationPlugin = ({
           const {
             isToolbarAbove
           } = annotationProviders.inlineComment;
-          return buildToolbar(api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(state, intl, isToolbarAbove, featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia);
+          return buildToolbar(api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)({
+            state,
+            intl,
+            isToolbarAbove,
+            isCommentOnMediaOn: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia,
+            api
+          });
         }
       }
     },

package/dist/es2019/toolbar.js

@@ -7,10 +7,48 @@ import { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHe
 import CommentIcon from '@atlaskit/icon/core/comment';
 import LegacyCommentIcon from '@atlaskit/icon/glyph/comment';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setInlineCommentDraftState } from './commands';
 import { AnnotationSelectionType, AnnotationTestIds } from './types';
 import { getPluginState, isSelectionValid, resolveDraftBookmark } from './utils';
-export const buildToolbar = editorAnalyticsAPI => (state, intl, isToolbarAbove = false, isCommentOnMediaOn, _supportedNodes = []) => {
+const INLINE_COMMENT_ON_INLINE_NODE_SPOTLIGHT_EP_MESSAGE_ID = 'inline-comments-on-inline-node-spotlight';
+const createSpotlightConfig = ({
+  api,
+  intl
+}) => {
+  var _api$engagementPlatfo, _api$engagementPlatfo2;
+  const isUserEnrolledInEpAudience = !!(api !== null && api !== void 0 && (_api$engagementPlatfo = api.engagementPlatform) !== null && _api$engagementPlatfo !== void 0 && (_api$engagementPlatfo2 = _api$engagementPlatfo.sharedState.currentState()) !== null && _api$engagementPlatfo2 !== void 0 && _api$engagementPlatfo2.messageStates[INLINE_COMMENT_ON_INLINE_NODE_SPOTLIGHT_EP_MESSAGE_ID]);
+  // Ensure experiment is only ran on users who are in the EP audience
+  const isSpotlightOpen = isUserEnrolledInEpAudience && editorExperiment('comment_on_inline_node_spotlight', true, {
+    exposure: true
+  });
+  const stopSpotlight = () => {
+    var _api$engagementPlatfo3;
+    return api === null || api === void 0 ? void 0 : (_api$engagementPlatfo3 = api.engagementPlatform) === null || _api$engagementPlatfo3 === void 0 ? void 0 : _api$engagementPlatfo3.actions.stopMessage(INLINE_COMMENT_ON_INLINE_NODE_SPOTLIGHT_EP_MESSAGE_ID);
+  };
+  return {
+    isSpotlightOpen,
+    pulse: isSpotlightOpen,
+    onTargetClick: stopSpotlight,
+    spotlightCardOptions: {
+      children: intl.formatMessage(annotationMessages.createCommentOnInlineNodeSpotlightBody),
+      actions: [{
+        text: intl.formatMessage(annotationMessages.createCommentOnInlineNodeSpotlightAction),
+        onClick: () => stopSpotlight()
+      }],
+      placement: 'top-start',
+      width: 275
+    }
+  };
+};
+export const buildToolbar = editorAnalyticsAPI => ({
+  state,
+  intl,
+  isToolbarAbove = false,
+  isCommentOnMediaOn,
+  _supportedNodes = [],
+  api
+}) => {
   const {
     schema
   } = state;
@@ -51,11 +89,6 @@ export const buildToolbar = editorAnalyticsAPI => (state, intl, isToolbarAbove =
           actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
           eventType: EVENT_TYPE.UI,
           attributes: {
-            /**
-             * This attribute is used as the trigger to display an engagement platform promotion message
-             * when isNonTextInlineNodeInludedInComment is true, and isDisabled is false,
-             * A spotlight/flag will be shown to the user to encourage them to comment on inline nodes.
-             */
             isNonTextInlineNodeInludedInComment,
             isDisabled: selectionValid === AnnotationSelectionType.DISABLED,
             inputMethod: INPUT_METHOD.FLOATING_TB,
@@ -63,6 +96,23 @@ export const buildToolbar = editorAnalyticsAPI => (state, intl, isToolbarAbove =
           }
         });
       }
+
+      /* When a user selects a valid range of content that includes non-text inline node (e.g. media, mention, emoji, etc.)
+          * Attempt to fire a spotlight to guide the user to create an inline comment on the inline node.
+       * The spotlight will only be displayed if the user is a valid EP audience and the feature flag is enabled.
+      */
+      if (isNonTextInlineNodeInludedInComment && selectionValid === AnnotationSelectionType.VALID && fg('editor_inline_comments_on_inline_nodes_spotlight')) {
+        var _api$engagementPlatfo4;
+        api === null || api === void 0 ? void 0 : (_api$engagementPlatfo4 = api.engagementPlatform) === null || _api$engagementPlatfo4 === void 0 ? void 0 : _api$engagementPlatfo4.actions.startMessage('inline-comments-on-inline-node-spotlight');
+      }
+    },
+    onUnmount: () => {
+      var _api$engagementPlatfo5, _api$engagementPlatfo6;
+      // if enagement spotlight is still active, stop it
+      if (api !== null && api !== void 0 && (_api$engagementPlatfo5 = api.engagementPlatform) !== null && _api$engagementPlatfo5 !== void 0 && (_api$engagementPlatfo6 = _api$engagementPlatfo5.sharedState.currentState()) !== null && _api$engagementPlatfo6 !== void 0 && _api$engagementPlatfo6.messageStates[INLINE_COMMENT_ON_INLINE_NODE_SPOTLIGHT_EP_MESSAGE_ID]) {
+        var _api$engagementPlatfo7;
+        api === null || api === void 0 ? void 0 : (_api$engagementPlatfo7 = api.engagementPlatform) === null || _api$engagementPlatfo7 === void 0 ? void 0 : _api$engagementPlatfo7.actions.stopMessage(INLINE_COMMENT_ON_INLINE_NODE_SPOTLIGHT_EP_MESSAGE_ID);
+      }
     },
     onClick: (state, dispatch) => {
       if (editorAnalyticsAPI) {
@@ -81,7 +131,12 @@ export const buildToolbar = editorAnalyticsAPI => (state, intl, isToolbarAbove =
       }
       return setInlineCommentDraftState(editorAnalyticsAPI)(true)(state, dispatch);
     },
-    supportsViewMode: true // TODO: MODES-3950 Clean up this floating toolbar view mode logic
+    supportsViewMode: true,
+    // TODO: MODES-3950 Clean up this floating toolbar view mode logic,
+    spotlightConfig: createSpotlightConfig({
+      api,
+      intl
+    })
   };
   const {
     annotation

package/dist/es2019/utils.js

@@ -2,7 +2,7 @@ import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { currentMediaNodeWithPos } from '@atlaskit/editor-common/media-single';
 import { AnnotationSharedClassNames, BlockAnnotationSharedClassNames } from '@atlaskit/editor-common/styles';
-import { canApplyAnnotationOnRange, containsAnyAnnotations, getAnnotationIdsFromRange, getRangeInlineNodeNames, hasAnnotationMark, isParagraph, isText } from '@atlaskit/editor-common/utils';
+import { canApplyAnnotationOnRange, containsAnyAnnotations, getAnnotationIdsFromRange, getRangeInlineNodeNames, hasAnnotationMark, isEmptyTextSelection, isParagraph, isText } from '@atlaskit/editor-common/utils';
 import { AllSelection, NodeSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -323,30 +323,6 @@ export const hasInvalidNodes = state => {
     to: selection.to
   }, doc, schema);
 };
-
-/**
- * Checks if selection contains only empty text
- * e.g. when you select across multiple empty paragraphs
- */
-function isEmptyTextSelection(selection, schema) {
-  const {
-    text,
-    paragraph
-  } = schema.nodes;
-  let hasContent = false;
-  selection.content().content.descendants(node => {
-    // for empty paragraph - consider empty (nothing to comment on)
-    if (node.type === paragraph && !node.content.size) {
-      return false;
-    }
-    // for not a text or nonempty text - consider nonempty (can comment if the node is supported for annotations)
-    if (node.type !== text || !node.textContent) {
-      hasContent = true;
-    }
-    return !hasContent;
-  });
-  return !hasContent;
-}
 export const isSupportedBlockNode = (node, supportedBlockNodes = []) => {
   return supportedBlockNodes.indexOf(node.type.name) >= 0 || node.type.name === 'mediaSingle' && supportedBlockNodes.indexOf('media') >= 0;
 };

package/dist/esm/plugin.js

@@ -75,7 +75,13 @@ export var annotationPlugin = function annotationPlugin(_ref) {
         if (pluginState && pluginState.isVisible && !pluginState.bookmark && !pluginState.mouseData.isSelecting) {
           var _api$analytics4;
           var isToolbarAbove = annotationProviders.inlineComment.isToolbarAbove;
-          return buildToolbar(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(state, intl, isToolbarAbove, featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia);
+          return buildToolbar(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)({
+            state: state,
+            intl: intl,
+            isToolbarAbove: isToolbarAbove,
+            isCommentOnMediaOn: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia,
+            api: api
+          });
         }
       }
     },

package/dist/esm/toolbar.js

@@ -7,14 +7,51 @@ import { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHe
 import CommentIcon from '@atlaskit/icon/core/comment';
 import LegacyCommentIcon from '@atlaskit/icon/glyph/comment';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setInlineCommentDraftState } from './commands';
 import { AnnotationSelectionType, AnnotationTestIds } from './types';
 import { getPluginState, isSelectionValid, resolveDraftBookmark } from './utils';
+var INLINE_COMMENT_ON_INLINE_NODE_SPOTLIGHT_EP_MESSAGE_ID = 'inline-comments-on-inline-node-spotlight';
+var createSpotlightConfig = function createSpotlightConfig(_ref) {
+  var _api$engagementPlatfo;
+  var api = _ref.api,
+    intl = _ref.intl;
+  var isUserEnrolledInEpAudience = !!(api !== null && api !== void 0 && (_api$engagementPlatfo = api.engagementPlatform) !== null && _api$engagementPlatfo !== void 0 && (_api$engagementPlatfo = _api$engagementPlatfo.sharedState.currentState()) !== null && _api$engagementPlatfo !== void 0 && _api$engagementPlatfo.messageStates[INLINE_COMMENT_ON_INLINE_NODE_SPOTLIGHT_EP_MESSAGE_ID]);
+  // Ensure experiment is only ran on users who are in the EP audience
+  var isSpotlightOpen = isUserEnrolledInEpAudience && editorExperiment('comment_on_inline_node_spotlight', true, {
+    exposure: true
+  });
+  var stopSpotlight = function stopSpotlight() {
+    var _api$engagementPlatfo2;
+    return api === null || api === void 0 || (_api$engagementPlatfo2 = api.engagementPlatform) === null || _api$engagementPlatfo2 === void 0 ? void 0 : _api$engagementPlatfo2.actions.stopMessage(INLINE_COMMENT_ON_INLINE_NODE_SPOTLIGHT_EP_MESSAGE_ID);
+  };
+  return {
+    isSpotlightOpen: isSpotlightOpen,
+    pulse: isSpotlightOpen,
+    onTargetClick: stopSpotlight,
+    spotlightCardOptions: {
+      children: intl.formatMessage(annotationMessages.createCommentOnInlineNodeSpotlightBody),
+      actions: [{
+        text: intl.formatMessage(annotationMessages.createCommentOnInlineNodeSpotlightAction),
+        onClick: function onClick() {
+          return stopSpotlight();
+        }
+      }],
+      placement: 'top-start',
+      width: 275
+    }
+  };
+};
 export var buildToolbar = function buildToolbar(editorAnalyticsAPI) {
-  return function (state, intl) {
-    var isToolbarAbove = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    var isCommentOnMediaOn = arguments.length > 3 ? arguments[3] : undefined;
-    var _supportedNodes = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+  return function (_ref2) {
+    var state = _ref2.state,
+      intl = _ref2.intl,
+      _ref2$isToolbarAbove = _ref2.isToolbarAbove,
+      isToolbarAbove = _ref2$isToolbarAbove === void 0 ? false : _ref2$isToolbarAbove,
+      isCommentOnMediaOn = _ref2.isCommentOnMediaOn,
+      _ref2$_supportedNodes = _ref2._supportedNodes,
+      _supportedNodes = _ref2$_supportedNodes === void 0 ? [] : _ref2$_supportedNodes,
+      api = _ref2.api;
     var schema = state.schema;
     var selectionValid = isSelectionValid(state, isCommentOnMediaOn);
     var isMediaSelected = isCommentOnMediaOn && currentMediaNodeWithPos(state);
@@ -55,11 +92,6 @@ export var buildToolbar = function buildToolbar(editorAnalyticsAPI) {
             actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
             eventType: EVENT_TYPE.UI,
             attributes: {
-              /**
-               * This attribute is used as the trigger to display an engagement platform promotion message
-               * when isNonTextInlineNodeInludedInComment is true, and isDisabled is false,
-               * A spotlight/flag will be shown to the user to encourage them to comment on inline nodes.
-               */
               isNonTextInlineNodeInludedInComment: isNonTextInlineNodeInludedInComment,
               isDisabled: selectionValid === AnnotationSelectionType.DISABLED,
               inputMethod: INPUT_METHOD.FLOATING_TB,
@@ -67,6 +99,23 @@ export var buildToolbar = function buildToolbar(editorAnalyticsAPI) {
             }
           });
         }
+
+        /* When a user selects a valid range of content that includes non-text inline node (e.g. media, mention, emoji, etc.)
+            * Attempt to fire a spotlight to guide the user to create an inline comment on the inline node.
+         * The spotlight will only be displayed if the user is a valid EP audience and the feature flag is enabled.
+        */
+        if (isNonTextInlineNodeInludedInComment && selectionValid === AnnotationSelectionType.VALID && fg('editor_inline_comments_on_inline_nodes_spotlight')) {
+          var _api$engagementPlatfo3;
+          api === null || api === void 0 || (_api$engagementPlatfo3 = api.engagementPlatform) === null || _api$engagementPlatfo3 === void 0 || _api$engagementPlatfo3.actions.startMessage('inline-comments-on-inline-node-spotlight');
+        }
+      },
+      onUnmount: function onUnmount() {
+        var _api$engagementPlatfo4;
+        // if enagement spotlight is still active, stop it
+        if (api !== null && api !== void 0 && (_api$engagementPlatfo4 = api.engagementPlatform) !== null && _api$engagementPlatfo4 !== void 0 && (_api$engagementPlatfo4 = _api$engagementPlatfo4.sharedState.currentState()) !== null && _api$engagementPlatfo4 !== void 0 && _api$engagementPlatfo4.messageStates[INLINE_COMMENT_ON_INLINE_NODE_SPOTLIGHT_EP_MESSAGE_ID]) {
+          var _api$engagementPlatfo5;
+          api === null || api === void 0 || (_api$engagementPlatfo5 = api.engagementPlatform) === null || _api$engagementPlatfo5 === void 0 || _api$engagementPlatfo5.actions.stopMessage(INLINE_COMMENT_ON_INLINE_NODE_SPOTLIGHT_EP_MESSAGE_ID);
+        }
       },
       onClick: function onClick(state, dispatch) {
         if (editorAnalyticsAPI) {
@@ -85,7 +134,12 @@ export var buildToolbar = function buildToolbar(editorAnalyticsAPI) {
         }
         return setInlineCommentDraftState(editorAnalyticsAPI)(true)(state, dispatch);
       },
-      supportsViewMode: true // TODO: MODES-3950 Clean up this floating toolbar view mode logic
+      supportsViewMode: true,
+      // TODO: MODES-3950 Clean up this floating toolbar view mode logic,
+      spotlightConfig: createSpotlightConfig({
+        api: api,
+        intl: intl
+      })
     };
     var annotation = schema.marks.annotation;
     var validNodes = Object.keys(schema.nodes).reduce(function (acc, current) {

package/dist/esm/utils.js

@@ -2,7 +2,7 @@ import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { currentMediaNodeWithPos } from '@atlaskit/editor-common/media-single';
 import { AnnotationSharedClassNames, BlockAnnotationSharedClassNames } from '@atlaskit/editor-common/styles';
-import { canApplyAnnotationOnRange, containsAnyAnnotations, getAnnotationIdsFromRange, getRangeInlineNodeNames, hasAnnotationMark, isParagraph, isText } from '@atlaskit/editor-common/utils';
+import { canApplyAnnotationOnRange, containsAnyAnnotations, getAnnotationIdsFromRange, getRangeInlineNodeNames, hasAnnotationMark, isEmptyTextSelection, isParagraph, isText } from '@atlaskit/editor-common/utils';
 import { AllSelection, NodeSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -329,29 +329,6 @@ export var hasInvalidNodes = function hasInvalidNodes(state) {
     to: selection.to
   }, doc, schema);
 };
-
-/**
- * Checks if selection contains only empty text
- * e.g. when you select across multiple empty paragraphs
- */
-function isEmptyTextSelection(selection, schema) {
-  var _schema$nodes = schema.nodes,
-    text = _schema$nodes.text,
-    paragraph = _schema$nodes.paragraph;
-  var hasContent = false;
-  selection.content().content.descendants(function (node) {
-    // for empty paragraph - consider empty (nothing to comment on)
-    if (node.type === paragraph && !node.content.size) {
-      return false;
-    }
-    // for not a text or nonempty text - consider nonempty (can comment if the node is supported for annotations)
-    if (node.type !== text || !node.textContent) {
-      hasContent = true;
-    }
-    return !hasContent;
-  });
-  return !hasContent;
-}
 export var isSupportedBlockNode = function isSupportedBlockNode(node) {
   var supportedBlockNodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   return supportedBlockNodes.indexOf(node.type.name) >= 0 || node.type.name === 'mediaSingle' && supportedBlockNodes.indexOf('media') >= 0;

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

@@ -89,7 +89,27 @@ declare const _default: {
         }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
             pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
             sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
-        }, import("@atlaskit/editor-common/types").FeatureFlags>>];
+        }, import("@atlaskit/editor-common/types").FeatureFlags>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"engagementPlatform", {
+            actions: {
+                startMessage: (messageId: string, variationId?: string | undefined) => Promise<boolean>;
+                stopMessage: (messageId: string) => Promise<boolean>;
+            };
+            pluginConfiguration: import("@atlaskit/editor-plugin-engagement-platform").EngagementPlatformPluginConfig;
+            dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
+                pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
+                sharedState: {
+                    createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
+                    attachAnalyticsEvent: import("@atlaskit/editor-plugin-analytics").CreateAttachPayloadIntoTransaction | null;
+                    performanceTracking: import("@atlaskit/editor-common/types").PerformanceTracking | undefined;
+                };
+                dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
+                    pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
+                    sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
+                }, import("@atlaskit/editor-common/types").FeatureFlags>>];
+                actions: EditorAnalyticsAPI;
+            }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>>];
+            sharedState: import("@atlaskit/editor-plugin-engagement-platform").EngagementPlatformPluginState;
+        }, import("@atlaskit/editor-plugin-engagement-platform").EngagementPlatformPluginConfig>>];
         actions: {
             stripNonExistingAnnotations: (slice: import("prosemirror-model").Slice, state: EditorState) => boolean | undefined;
             setInlineCommentDraftState: (drafting: boolean, inputMethod: InlineCommentInputMethod, targetType?: import("../types").TargetType | undefined, isCommentOnMediaOn?: boolean | undefined, targetNodeId?: string | undefined) => import("@atlaskit/editor-common/types").Command;

package/dist/types/toolbar.d.ts

@@ -1,5 +1,15 @@
 import type { IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { FloatingToolbarConfig } from '@atlaskit/editor-common/types';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-export declare const buildToolbar: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (state: EditorState, intl: IntlShape, isToolbarAbove?: boolean, isCommentOnMediaOn?: boolean, _supportedNodes?: string[]) => FloatingToolbarConfig | undefined;
+import type { ExtractInjectionAPI, FloatingToolbarConfig } from '@atlaskit/editor-common/types';
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+import { type AnnotationPlugin } from './types';
+interface BuildToolbarOptions {
+    state: EditorState;
+    intl: IntlShape;
+    isToolbarAbove?: boolean;
+    isCommentOnMediaOn?: boolean;
+    _supportedNodes?: string[];
+    api?: ExtractInjectionAPI<AnnotationPlugin>;
+}
+export declare const buildToolbar: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ state, intl, isToolbarAbove, isCommentOnMediaOn, _supportedNodes, api, }: BuildToolbarOptions) => FloatingToolbarConfig | undefined;
+export {};

package/dist/types/types.d.ts

@@ -5,6 +5,7 @@ import type { AnnotationUpdateEmitter } from '@atlaskit/editor-common/annotation
 import type { Command, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { EditorViewModeEffectsPlugin } from '@atlaskit/editor-plugin-editor-viewmode-effects';
+import type { EngagementPlatformPlugin } from '@atlaskit/editor-plugin-engagement-platform';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { Slice } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
@@ -31,7 +32,8 @@ export type AnnotationPlugin = NextEditorPlugin<'annotation', {
     dependencies: [
         OptionalPlugin<AnalyticsPlugin>,
         OptionalPlugin<EditorViewModeEffectsPlugin>,
-        OptionalPlugin<FeatureFlagsPlugin>
+        OptionalPlugin<FeatureFlagsPlugin>,
+        OptionalPlugin<EngagementPlatformPlugin>
     ];
     actions: {
         stripNonExistingAnnotations: StripNonExistingAnnotations;

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

@@ -105,7 +105,32 @@ declare const _default: {
             import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
                 pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
                 sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
-            }, import("@atlaskit/editor-common/types").FeatureFlags>>
+            }, import("@atlaskit/editor-common/types").FeatureFlags>>,
+            import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"engagementPlatform", {
+                actions: {
+                    startMessage: (messageId: string, variationId?: string | undefined) => Promise<boolean>;
+                    stopMessage: (messageId: string) => Promise<boolean>;
+                };
+                pluginConfiguration: import("@atlaskit/editor-plugin-engagement-platform").EngagementPlatformPluginConfig;
+                dependencies: [
+                    import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
+                        pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
+                        sharedState: {
+                            createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
+                            attachAnalyticsEvent: import("@atlaskit/editor-plugin-analytics").CreateAttachPayloadIntoTransaction | null;
+                            performanceTracking: import("@atlaskit/editor-common/types").PerformanceTracking | undefined;
+                        };
+                        dependencies: [
+                            import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
+                                pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
+                                sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
+                            }, import("@atlaskit/editor-common/types").FeatureFlags>>
+                        ];
+                        actions: EditorAnalyticsAPI;
+                    }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>>
+                ];
+                sharedState: import("@atlaskit/editor-plugin-engagement-platform").EngagementPlatformPluginState;
+            }, import("@atlaskit/editor-plugin-engagement-platform").EngagementPlatformPluginConfig>>
         ];
         actions: {
             stripNonExistingAnnotations: (slice: import("prosemirror-model").Slice, state: EditorState) => boolean | undefined;

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

@@ -1,5 +1,15 @@
 import type { IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { FloatingToolbarConfig } from '@atlaskit/editor-common/types';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-export declare const buildToolbar: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (state: EditorState, intl: IntlShape, isToolbarAbove?: boolean, isCommentOnMediaOn?: boolean, _supportedNodes?: string[]) => FloatingToolbarConfig | undefined;
+import type { ExtractInjectionAPI, FloatingToolbarConfig } from '@atlaskit/editor-common/types';
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+import { type AnnotationPlugin } from './types';
+interface BuildToolbarOptions {
+    state: EditorState;
+    intl: IntlShape;
+    isToolbarAbove?: boolean;
+    isCommentOnMediaOn?: boolean;
+    _supportedNodes?: string[];
+    api?: ExtractInjectionAPI<AnnotationPlugin>;
+}
+export declare const buildToolbar: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ state, intl, isToolbarAbove, isCommentOnMediaOn, _supportedNodes, api, }: BuildToolbarOptions) => FloatingToolbarConfig | undefined;
+export {};

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

@@ -5,6 +5,7 @@ import type { AnnotationUpdateEmitter } from '@atlaskit/editor-common/annotation
 import type { Command, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { EditorViewModeEffectsPlugin } from '@atlaskit/editor-plugin-editor-viewmode-effects';
+import type { EngagementPlatformPlugin } from '@atlaskit/editor-plugin-engagement-platform';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { Slice } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
@@ -31,7 +32,8 @@ export type AnnotationPlugin = NextEditorPlugin<'annotation', {
     dependencies: [
         OptionalPlugin<AnalyticsPlugin>,
         OptionalPlugin<EditorViewModeEffectsPlugin>,
-        OptionalPlugin<FeatureFlagsPlugin>
+        OptionalPlugin<FeatureFlagsPlugin>,
+        OptionalPlugin<EngagementPlatformPlugin>
     ];
     actions: {
         stripNonExistingAnnotations: StripNonExistingAnnotations;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-annotation",
-	"version": "1.21.3",
+	"version": "1.23.0",
 	"description": "Annotation plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,13 +32,16 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^42.3.1",
-		"@atlaskit/editor-common": "^94.2.0",
+		"@atlaskit/editor-common": "^94.9.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-editor-viewmode-effects": "^1.1.0",
+		"@atlaskit/editor-plugin-engagement-platform": "^2.1.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.2.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/icon": "^22.24.0",
+		"@atlaskit/onboarding": "^11.17.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/tmp-editor-statsig": "^2.10.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
@@ -90,6 +93,9 @@
 	"platform-feature-flags": {
 		"editor_inline_comments_on_inline_nodes": {
 			"type": "boolean"
+		},
+		"editor_inline_comments_on_inline_nodes_spotlight": {
+			"type": "boolean"
 		}
 	}
 }