@atlaskit/editor-plugin-annotation 1.21.2 → 1.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/cjs/plugin.js +7 -1
  3. package/dist/cjs/toolbar.js +64 -10
  4. package/dist/es2019/plugin.js +7 -1
  5. package/dist/es2019/toolbar.js +62 -7
  6. package/dist/esm/plugin.js +7 -1
  7. package/dist/esm/toolbar.js +64 -10
  8. package/dist/types/commands/transform.d.ts +21 -1
  9. package/dist/types/toolbar.d.ts +13 -3
  10. package/dist/types/types.d.ts +3 -1
  11. package/dist/types-ts4.5/commands/transform.d.ts +26 -1
  12. package/dist/types-ts4.5/toolbar.d.ts +13 -3
  13. package/dist/types-ts4.5/types.d.ts +3 -1
  14. package/package.json +12 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @atlaskit/editor-plugin-annotation
2
2
 
3
+ ## 1.22.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#157867](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157867)
8
+ [`8398a1f0013fc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8398a1f0013fc) -
9
+ [ux] ED-25331-add-spotlight-to-inline-comment-button
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 1.21.3
16
+
17
+ ### Patch Changes
18
+
19
+ - [#155735](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155735)
20
+ [`1beeeda29023a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1beeeda29023a) -
21
+ Upgrades editor packages to react 18
22
+ - Updated dependencies
23
+
3
24
  ## 1.21.2
4
25
 
5
26
  ### Patch Changes
package/dist/cjs/plugin.js CHANGED
@@ -88,7 +88,13 @@ var annotationPlugin = exports.annotationPlugin = function annotationPlugin(_ref
88
88
  if (pluginState && pluginState.isVisible && !pluginState.bookmark && !pluginState.mouseData.isSelecting) {
89
89
  var _api$analytics4;
90
90
  var isToolbarAbove = annotationProviders.inlineComment.isToolbarAbove;
91
- 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);
91
+ return (0, _toolbar.buildToolbar)(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)({
92
+ state: state,
93
+ intl: intl,
94
+ isToolbarAbove: isToolbarAbove,
95
+ isCommentOnMediaOn: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia,
96
+ api: api
97
+ });
92
98
  }
93
99
  }
94
100
  },
package/dist/cjs/toolbar.js CHANGED
@@ -14,14 +14,51 @@ var _utils = require("@atlaskit/editor-common/utils");
14
14
  var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
15
15
  var _comment2 = _interopRequireDefault(require("@atlaskit/icon/glyph/comment"));
16
16
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
17
+ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
17
18
  var _commands = require("./commands");
18
19
  var _types = require("./types");
19
20
  var _utils2 = require("./utils");
21
+ var INLINE_COMMENT_ON_INLINE_NODE_SPOTLIGHT_EP_MESSAGE_ID = 'inline-comments-on-inline-node-spotlight';
22
+ var createSpotlightConfig = function createSpotlightConfig(_ref) {
23
+ var _api$engagementPlatfo;
24
+ var api = _ref.api,
25
+ intl = _ref.intl;
26
+ 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]);
27
+ // Ensure experiment is only ran on users who are in the EP audience
28
+ var isSpotlightOpen = isUserEnrolledInEpAudience && (0, _experiments.editorExperiment)('comment_on_inline_node_spotlight', true, {
29
+ exposure: true
30
+ });
31
+ var stopSpotlight = function stopSpotlight() {
32
+ var _api$engagementPlatfo2;
33
+ 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);
34
+ };
35
+ return {
36
+ isSpotlightOpen: isSpotlightOpen,
37
+ pulse: isSpotlightOpen,
38
+ onTargetClick: stopSpotlight,
39
+ spotlightCardOptions: {
40
+ children: intl.formatMessage(_messages.annotationMessages.createCommentOnInlineNodeSpotlightBody),
41
+ actions: [{
42
+ text: intl.formatMessage(_messages.annotationMessages.createCommentOnInlineNodeSpotlightAction),
43
+ onClick: function onClick() {
44
+ return stopSpotlight();
45
+ }
46
+ }],
47
+ placement: 'top-start',
48
+ width: 275
49
+ }
50
+ };
51
+ };
20
52
  var buildToolbar = exports.buildToolbar = function buildToolbar(editorAnalyticsAPI) {
21
- return function (state, intl) {
22
- var isToolbarAbove = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
23
- var isCommentOnMediaOn = arguments.length > 3 ? arguments[3] : undefined;
24
- var _supportedNodes = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
53
+ return function (_ref2) {
54
+ var state = _ref2.state,
55
+ intl = _ref2.intl,
56
+ _ref2$isToolbarAbove = _ref2.isToolbarAbove,
57
+ isToolbarAbove = _ref2$isToolbarAbove === void 0 ? false : _ref2$isToolbarAbove,
58
+ isCommentOnMediaOn = _ref2.isCommentOnMediaOn,
59
+ _ref2$_supportedNodes = _ref2._supportedNodes,
60
+ _supportedNodes = _ref2$_supportedNodes === void 0 ? [] : _ref2$_supportedNodes,
61
+ api = _ref2.api;
25
62
  var schema = state.schema;
26
63
  var selectionValid = (0, _utils2.isSelectionValid)(state, isCommentOnMediaOn);
27
64
  var isMediaSelected = isCommentOnMediaOn && (0, _mediaSingle.currentMediaNodeWithPos)(state);
@@ -62,11 +99,6 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(editorAnalyticsA
62
99
  actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
63
100
  eventType: _analytics.EVENT_TYPE.UI,
64
101
  attributes: {
65
- /**
66
- * This attribute is used as the trigger to display an engagement platform promotion message
67
- * when isNonTextInlineNodeInludedInComment is true, and isDisabled is false,
68
- * A spotlight/flag will be shown to the user to encourage them to comment on inline nodes.
69
- */
70
102
  isNonTextInlineNodeInludedInComment: isNonTextInlineNodeInludedInComment,
71
103
  isDisabled: selectionValid === _types.AnnotationSelectionType.DISABLED,
72
104
  inputMethod: _analytics.INPUT_METHOD.FLOATING_TB,
@@ -74,6 +106,23 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(editorAnalyticsA
74
106
  }
75
107
  });
76
108
  }
109
+
110
+ /* When a user selects a valid range of content that includes non-text inline node (e.g. media, mention, emoji, etc.)
111
+ * Attempt to fire a spotlight to guide the user to create an inline comment on the inline node.
112
+ * The spotlight will only be displayed if the user is a valid EP audience and the feature flag is enabled.
113
+ */
114
+ if (isNonTextInlineNodeInludedInComment && selectionValid === _types.AnnotationSelectionType.VALID && (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes_spotlight')) {
115
+ var _api$engagementPlatfo3;
116
+ api === null || api === void 0 || (_api$engagementPlatfo3 = api.engagementPlatform) === null || _api$engagementPlatfo3 === void 0 || _api$engagementPlatfo3.actions.startMessage('inline-comments-on-inline-node-spotlight');
117
+ }
118
+ },
119
+ onUnmount: function onUnmount() {
120
+ var _api$engagementPlatfo4;
121
+ // if enagement spotlight is still active, stop it
122
+ 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]) {
123
+ var _api$engagementPlatfo5;
124
+ 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);
125
+ }
77
126
  },
78
127
  onClick: function onClick(state, dispatch) {
79
128
  if (editorAnalyticsAPI) {
@@ -92,7 +141,12 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(editorAnalyticsA
92
141
  }
93
142
  return (0, _commands.setInlineCommentDraftState)(editorAnalyticsAPI)(true)(state, dispatch);
94
143
  },
95
- supportsViewMode: true // TODO: MODES-3950 Clean up this floating toolbar view mode logic
144
+ supportsViewMode: true,
145
+ // TODO: MODES-3950 Clean up this floating toolbar view mode logic,
146
+ spotlightConfig: createSpotlightConfig({
147
+ api: api,
148
+ intl: intl
149
+ })
96
150
  };
97
151
  var annotation = schema.marks.annotation;
98
152
  var validNodes = Object.keys(schema.nodes).reduce(function (acc, current) {
package/dist/es2019/plugin.js CHANGED
@@ -77,7 +77,13 @@ export const annotationPlugin = ({
77
77
  const {
78
78
  isToolbarAbove
79
79
  } = annotationProviders.inlineComment;
80
- 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);
80
+ return buildToolbar(api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)({
81
+ state,
82
+ intl,
83
+ isToolbarAbove,
84
+ isCommentOnMediaOn: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia,
85
+ api
86
+ });
81
87
  }
82
88
  }
83
89
  },
package/dist/es2019/toolbar.js CHANGED
@@ -7,10 +7,48 @@ import { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHe
7
7
  import CommentIcon from '@atlaskit/icon/core/comment';
8
8
  import LegacyCommentIcon from '@atlaskit/icon/glyph/comment';
9
9
  import { fg } from '@atlaskit/platform-feature-flags';
10
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
10
11
  import { setInlineCommentDraftState } from './commands';
11
12
  import { AnnotationSelectionType, AnnotationTestIds } from './types';
12
13
  import { getPluginState, isSelectionValid, resolveDraftBookmark } from './utils';
13
- export const buildToolbar = editorAnalyticsAPI => (state, intl, isToolbarAbove = false, isCommentOnMediaOn, _supportedNodes = []) => {
14
+ const INLINE_COMMENT_ON_INLINE_NODE_SPOTLIGHT_EP_MESSAGE_ID = 'inline-comments-on-inline-node-spotlight';
15
+ const createSpotlightConfig = ({
16
+ api,
17
+ intl
18
+ }) => {
19
+ var _api$engagementPlatfo, _api$engagementPlatfo2;
20
+ 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]);
21
+ // Ensure experiment is only ran on users who are in the EP audience
22
+ const isSpotlightOpen = isUserEnrolledInEpAudience && editorExperiment('comment_on_inline_node_spotlight', true, {
23
+ exposure: true
24
+ });
25
+ const stopSpotlight = () => {
26
+ var _api$engagementPlatfo3;
27
+ 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);
28
+ };
29
+ return {
30
+ isSpotlightOpen,
31
+ pulse: isSpotlightOpen,
32
+ onTargetClick: stopSpotlight,
33
+ spotlightCardOptions: {
34
+ children: intl.formatMessage(annotationMessages.createCommentOnInlineNodeSpotlightBody),
35
+ actions: [{
36
+ text: intl.formatMessage(annotationMessages.createCommentOnInlineNodeSpotlightAction),
37
+ onClick: () => stopSpotlight()
38
+ }],
39
+ placement: 'top-start',
40
+ width: 275
41
+ }
42
+ };
43
+ };
44
+ export const buildToolbar = editorAnalyticsAPI => ({
45
+ state,
46
+ intl,
47
+ isToolbarAbove = false,
48
+ isCommentOnMediaOn,
49
+ _supportedNodes = [],
50
+ api
51
+ }) => {
14
52
  const {
15
53
  schema
16
54
  } = state;
@@ -51,11 +89,6 @@ export const buildToolbar = editorAnalyticsAPI => (state, intl, isToolbarAbove =
51
89
  actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
52
90
  eventType: EVENT_TYPE.UI,
53
91
  attributes: {
54
- /**
55
- * This attribute is used as the trigger to display an engagement platform promotion message
56
- * when isNonTextInlineNodeInludedInComment is true, and isDisabled is false,
57
- * A spotlight/flag will be shown to the user to encourage them to comment on inline nodes.
58
- */
59
92
  isNonTextInlineNodeInludedInComment,
60
93
  isDisabled: selectionValid === AnnotationSelectionType.DISABLED,
61
94
  inputMethod: INPUT_METHOD.FLOATING_TB,
@@ -63,6 +96,23 @@ export const buildToolbar = editorAnalyticsAPI => (state, intl, isToolbarAbove =
63
96
  }
64
97
  });
65
98
  }
99
+
100
+ /* When a user selects a valid range of content that includes non-text inline node (e.g. media, mention, emoji, etc.)
101
+ * Attempt to fire a spotlight to guide the user to create an inline comment on the inline node.
102
+ * The spotlight will only be displayed if the user is a valid EP audience and the feature flag is enabled.
103
+ */
104
+ if (isNonTextInlineNodeInludedInComment && selectionValid === AnnotationSelectionType.VALID && fg('editor_inline_comments_on_inline_nodes_spotlight')) {
105
+ var _api$engagementPlatfo4;
106
+ 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');
107
+ }
108
+ },
109
+ onUnmount: () => {
110
+ var _api$engagementPlatfo5, _api$engagementPlatfo6;
111
+ // if enagement spotlight is still active, stop it
112
+ 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]) {
113
+ var _api$engagementPlatfo7;
114
+ 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);
115
+ }
66
116
  },
67
117
  onClick: (state, dispatch) => {
68
118
  if (editorAnalyticsAPI) {
@@ -81,7 +131,12 @@ export const buildToolbar = editorAnalyticsAPI => (state, intl, isToolbarAbove =
81
131
  }
82
132
  return setInlineCommentDraftState(editorAnalyticsAPI)(true)(state, dispatch);
83
133
  },
84
- supportsViewMode: true // TODO: MODES-3950 Clean up this floating toolbar view mode logic
134
+ supportsViewMode: true,
135
+ // TODO: MODES-3950 Clean up this floating toolbar view mode logic,
136
+ spotlightConfig: createSpotlightConfig({
137
+ api,
138
+ intl
139
+ })
85
140
  };
86
141
  const {
87
142
  annotation
package/dist/esm/plugin.js CHANGED
@@ -75,7 +75,13 @@ export var annotationPlugin = function annotationPlugin(_ref) {
75
75
  if (pluginState && pluginState.isVisible && !pluginState.bookmark && !pluginState.mouseData.isSelecting) {
76
76
  var _api$analytics4;
77
77
  var isToolbarAbove = annotationProviders.inlineComment.isToolbarAbove;
78
- 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);
78
+ return buildToolbar(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)({
79
+ state: state,
80
+ intl: intl,
81
+ isToolbarAbove: isToolbarAbove,
82
+ isCommentOnMediaOn: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia,
83
+ api: api
84
+ });
79
85
  }
80
86
  }
81
87
  },
package/dist/esm/toolbar.js CHANGED
@@ -7,14 +7,51 @@ import { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHe
7
7
  import CommentIcon from '@atlaskit/icon/core/comment';
8
8
  import LegacyCommentIcon from '@atlaskit/icon/glyph/comment';
9
9
  import { fg } from '@atlaskit/platform-feature-flags';
10
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
10
11
  import { setInlineCommentDraftState } from './commands';
11
12
  import { AnnotationSelectionType, AnnotationTestIds } from './types';
12
13
  import { getPluginState, isSelectionValid, resolveDraftBookmark } from './utils';
14
+ var INLINE_COMMENT_ON_INLINE_NODE_SPOTLIGHT_EP_MESSAGE_ID = 'inline-comments-on-inline-node-spotlight';
15
+ var createSpotlightConfig = function createSpotlightConfig(_ref) {
16
+ var _api$engagementPlatfo;
17
+ var api = _ref.api,
18
+ intl = _ref.intl;
19
+ 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]);
20
+ // Ensure experiment is only ran on users who are in the EP audience
21
+ var isSpotlightOpen = isUserEnrolledInEpAudience && editorExperiment('comment_on_inline_node_spotlight', true, {
22
+ exposure: true
23
+ });
24
+ var stopSpotlight = function stopSpotlight() {
25
+ var _api$engagementPlatfo2;
26
+ 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);
27
+ };
28
+ return {
29
+ isSpotlightOpen: isSpotlightOpen,
30
+ pulse: isSpotlightOpen,
31
+ onTargetClick: stopSpotlight,
32
+ spotlightCardOptions: {
33
+ children: intl.formatMessage(annotationMessages.createCommentOnInlineNodeSpotlightBody),
34
+ actions: [{
35
+ text: intl.formatMessage(annotationMessages.createCommentOnInlineNodeSpotlightAction),
36
+ onClick: function onClick() {
37
+ return stopSpotlight();
38
+ }
39
+ }],
40
+ placement: 'top-start',
41
+ width: 275
42
+ }
43
+ };
44
+ };
13
45
  export var buildToolbar = function buildToolbar(editorAnalyticsAPI) {
14
- return function (state, intl) {
15
- var isToolbarAbove = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
16
- var isCommentOnMediaOn = arguments.length > 3 ? arguments[3] : undefined;
17
- var _supportedNodes = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
46
+ return function (_ref2) {
47
+ var state = _ref2.state,
48
+ intl = _ref2.intl,
49
+ _ref2$isToolbarAbove = _ref2.isToolbarAbove,
50
+ isToolbarAbove = _ref2$isToolbarAbove === void 0 ? false : _ref2$isToolbarAbove,
51
+ isCommentOnMediaOn = _ref2.isCommentOnMediaOn,
52
+ _ref2$_supportedNodes = _ref2._supportedNodes,
53
+ _supportedNodes = _ref2$_supportedNodes === void 0 ? [] : _ref2$_supportedNodes,
54
+ api = _ref2.api;
18
55
  var schema = state.schema;
19
56
  var selectionValid = isSelectionValid(state, isCommentOnMediaOn);
20
57
  var isMediaSelected = isCommentOnMediaOn && currentMediaNodeWithPos(state);
@@ -55,11 +92,6 @@ export var buildToolbar = function buildToolbar(editorAnalyticsAPI) {
55
92
  actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
56
93
  eventType: EVENT_TYPE.UI,
57
94
  attributes: {
58
- /**
59
- * This attribute is used as the trigger to display an engagement platform promotion message
60
- * when isNonTextInlineNodeInludedInComment is true, and isDisabled is false,
61
- * A spotlight/flag will be shown to the user to encourage them to comment on inline nodes.
62
- */
63
95
  isNonTextInlineNodeInludedInComment: isNonTextInlineNodeInludedInComment,
64
96
  isDisabled: selectionValid === AnnotationSelectionType.DISABLED,
65
97
  inputMethod: INPUT_METHOD.FLOATING_TB,
@@ -67,6 +99,23 @@ export var buildToolbar = function buildToolbar(editorAnalyticsAPI) {
67
99
  }
68
100
  });
69
101
  }
102
+
103
+ /* When a user selects a valid range of content that includes non-text inline node (e.g. media, mention, emoji, etc.)
104
+ * Attempt to fire a spotlight to guide the user to create an inline comment on the inline node.
105
+ * The spotlight will only be displayed if the user is a valid EP audience and the feature flag is enabled.
106
+ */
107
+ if (isNonTextInlineNodeInludedInComment && selectionValid === AnnotationSelectionType.VALID && fg('editor_inline_comments_on_inline_nodes_spotlight')) {
108
+ var _api$engagementPlatfo3;
109
+ api === null || api === void 0 || (_api$engagementPlatfo3 = api.engagementPlatform) === null || _api$engagementPlatfo3 === void 0 || _api$engagementPlatfo3.actions.startMessage('inline-comments-on-inline-node-spotlight');
110
+ }
111
+ },
112
+ onUnmount: function onUnmount() {
113
+ var _api$engagementPlatfo4;
114
+ // if enagement spotlight is still active, stop it
115
+ 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]) {
116
+ var _api$engagementPlatfo5;
117
+ 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);
118
+ }
70
119
  },
71
120
  onClick: function onClick(state, dispatch) {
72
121
  if (editorAnalyticsAPI) {
@@ -85,7 +134,12 @@ export var buildToolbar = function buildToolbar(editorAnalyticsAPI) {
85
134
  }
86
135
  return setInlineCommentDraftState(editorAnalyticsAPI)(true)(state, dispatch);
87
136
  },
88
- supportsViewMode: true // TODO: MODES-3950 Clean up this floating toolbar view mode logic
137
+ supportsViewMode: true,
138
+ // TODO: MODES-3950 Clean up this floating toolbar view mode logic,
139
+ spotlightConfig: createSpotlightConfig({
140
+ api: api,
141
+ intl: intl
142
+ })
89
143
  };
90
144
  var annotation = schema.marks.annotation;
91
145
  var validNodes = Object.keys(schema.nodes).reduce(function (acc, current) {
package/dist/types/commands/transform.d.ts CHANGED
@@ -89,7 +89,27 @@ declare const _default: {
89
89
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
90
90
  pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
91
91
  sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
92
- }, import("@atlaskit/editor-common/types").FeatureFlags>>];
92
+ }, import("@atlaskit/editor-common/types").FeatureFlags>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"engagementPlatform", {
93
+ actions: {
94
+ startMessage: (messageId: string, variationId?: string | undefined) => Promise<boolean>;
95
+ stopMessage: (messageId: string) => Promise<boolean>;
96
+ };
97
+ pluginConfiguration: import("@atlaskit/editor-plugin-engagement-platform").EngagementPlatformPluginConfig;
98
+ dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
99
+ pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
100
+ sharedState: {
101
+ createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
102
+ attachAnalyticsEvent: import("@atlaskit/editor-plugin-analytics").CreateAttachPayloadIntoTransaction | null;
103
+ performanceTracking: import("@atlaskit/editor-common/types").PerformanceTracking | undefined;
104
+ };
105
+ dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
106
+ pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
107
+ sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
108
+ }, import("@atlaskit/editor-common/types").FeatureFlags>>];
109
+ actions: EditorAnalyticsAPI;
110
+ }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>>];
111
+ sharedState: import("@atlaskit/editor-plugin-engagement-platform").EngagementPlatformPluginState;
112
+ }, import("@atlaskit/editor-plugin-engagement-platform").EngagementPlatformPluginConfig>>];
93
113
  actions: {
94
114
  stripNonExistingAnnotations: (slice: import("prosemirror-model").Slice, state: EditorState) => boolean | undefined;
95
115
  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 CHANGED
@@ -1,5 +1,15 @@
1
1
  import type { IntlShape } from 'react-intl-next';
2
2
  import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
3
- import type { FloatingToolbarConfig } from '@atlaskit/editor-common/types';
4
- import type { EditorState } from '@atlaskit/editor-prosemirror/state';
5
- export declare const buildToolbar: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (state: EditorState, intl: IntlShape, isToolbarAbove?: boolean, isCommentOnMediaOn?: boolean, _supportedNodes?: string[]) => FloatingToolbarConfig | undefined;
3
+ import type { ExtractInjectionAPI, FloatingToolbarConfig } from '@atlaskit/editor-common/types';
4
+ import { type EditorState } from '@atlaskit/editor-prosemirror/state';
5
+ import { type AnnotationPlugin } from './types';
6
+ interface BuildToolbarOptions {
7
+ state: EditorState;
8
+ intl: IntlShape;
9
+ isToolbarAbove?: boolean;
10
+ isCommentOnMediaOn?: boolean;
11
+ _supportedNodes?: string[];
12
+ api?: ExtractInjectionAPI<AnnotationPlugin>;
13
+ }
14
+ export declare const buildToolbar: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ state, intl, isToolbarAbove, isCommentOnMediaOn, _supportedNodes, api, }: BuildToolbarOptions) => FloatingToolbarConfig | undefined;
15
+ export {};
package/dist/types/types.d.ts CHANGED
@@ -5,6 +5,7 @@ import type { AnnotationUpdateEmitter } from '@atlaskit/editor-common/annotation
5
5
  import type { Command, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
6
6
  import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
7
7
  import type { EditorViewModeEffectsPlugin } from '@atlaskit/editor-plugin-editor-viewmode-effects';
8
+ import type { EngagementPlatformPlugin } from '@atlaskit/editor-plugin-engagement-platform';
8
9
  import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
9
10
  import type { Slice } from '@atlaskit/editor-prosemirror/model';
10
11
  import type { EditorState } from '@atlaskit/editor-prosemirror/state';
@@ -31,7 +32,8 @@ export type AnnotationPlugin = NextEditorPlugin<'annotation', {
31
32
  dependencies: [
32
33
  OptionalPlugin<AnalyticsPlugin>,
33
34
  OptionalPlugin<EditorViewModeEffectsPlugin>,
34
- OptionalPlugin<FeatureFlagsPlugin>
35
+ OptionalPlugin<FeatureFlagsPlugin>,
36
+ OptionalPlugin<EngagementPlatformPlugin>
35
37
  ];
36
38
  actions: {
37
39
  stripNonExistingAnnotations: StripNonExistingAnnotations;
package/dist/types-ts4.5/commands/transform.d.ts CHANGED
@@ -105,7 +105,32 @@ declare const _default: {
105
105
  import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
106
106
  pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
107
107
  sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
108
- }, import("@atlaskit/editor-common/types").FeatureFlags>>
108
+ }, import("@atlaskit/editor-common/types").FeatureFlags>>,
109
+ import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"engagementPlatform", {
110
+ actions: {
111
+ startMessage: (messageId: string, variationId?: string | undefined) => Promise<boolean>;
112
+ stopMessage: (messageId: string) => Promise<boolean>;
113
+ };
114
+ pluginConfiguration: import("@atlaskit/editor-plugin-engagement-platform").EngagementPlatformPluginConfig;
115
+ dependencies: [
116
+ import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
117
+ pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
118
+ sharedState: {
119
+ createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
120
+ attachAnalyticsEvent: import("@atlaskit/editor-plugin-analytics").CreateAttachPayloadIntoTransaction | null;
121
+ performanceTracking: import("@atlaskit/editor-common/types").PerformanceTracking | undefined;
122
+ };
123
+ dependencies: [
124
+ import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
125
+ pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
126
+ sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
127
+ }, import("@atlaskit/editor-common/types").FeatureFlags>>
128
+ ];
129
+ actions: EditorAnalyticsAPI;
130
+ }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>>
131
+ ];
132
+ sharedState: import("@atlaskit/editor-plugin-engagement-platform").EngagementPlatformPluginState;
133
+ }, import("@atlaskit/editor-plugin-engagement-platform").EngagementPlatformPluginConfig>>
109
134
  ];
110
135
  actions: {
111
136
  stripNonExistingAnnotations: (slice: import("prosemirror-model").Slice, state: EditorState) => boolean | undefined;
package/dist/types-ts4.5/toolbar.d.ts CHANGED
@@ -1,5 +1,15 @@
1
1
  import type { IntlShape } from 'react-intl-next';
2
2
  import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
3
- import type { FloatingToolbarConfig } from '@atlaskit/editor-common/types';
4
- import type { EditorState } from '@atlaskit/editor-prosemirror/state';
5
- export declare const buildToolbar: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (state: EditorState, intl: IntlShape, isToolbarAbove?: boolean, isCommentOnMediaOn?: boolean, _supportedNodes?: string[]) => FloatingToolbarConfig | undefined;
3
+ import type { ExtractInjectionAPI, FloatingToolbarConfig } from '@atlaskit/editor-common/types';
4
+ import { type EditorState } from '@atlaskit/editor-prosemirror/state';
5
+ import { type AnnotationPlugin } from './types';
6
+ interface BuildToolbarOptions {
7
+ state: EditorState;
8
+ intl: IntlShape;
9
+ isToolbarAbove?: boolean;
10
+ isCommentOnMediaOn?: boolean;
11
+ _supportedNodes?: string[];
12
+ api?: ExtractInjectionAPI<AnnotationPlugin>;
13
+ }
14
+ export declare const buildToolbar: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ state, intl, isToolbarAbove, isCommentOnMediaOn, _supportedNodes, api, }: BuildToolbarOptions) => FloatingToolbarConfig | undefined;
15
+ export {};
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -5,6 +5,7 @@ import type { AnnotationUpdateEmitter } from '@atlaskit/editor-common/annotation
5
5
  import type { Command, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
6
6
  import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
7
7
  import type { EditorViewModeEffectsPlugin } from '@atlaskit/editor-plugin-editor-viewmode-effects';
8
+ import type { EngagementPlatformPlugin } from '@atlaskit/editor-plugin-engagement-platform';
8
9
  import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
9
10
  import type { Slice } from '@atlaskit/editor-prosemirror/model';
10
11
  import type { EditorState } from '@atlaskit/editor-prosemirror/state';
@@ -31,7 +32,8 @@ export type AnnotationPlugin = NextEditorPlugin<'annotation', {
31
32
  dependencies: [
32
33
  OptionalPlugin<AnalyticsPlugin>,
33
34
  OptionalPlugin<EditorViewModeEffectsPlugin>,
34
- OptionalPlugin<FeatureFlagsPlugin>
35
+ OptionalPlugin<FeatureFlagsPlugin>,
36
+ OptionalPlugin<EngagementPlatformPlugin>
35
37
  ];
36
38
  actions: {
37
39
  stripNonExistingAnnotations: StripNonExistingAnnotations;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-annotation",
3
- "version": "1.21.2",
3
+ "version": "1.22.0",
4
4
  "description": "Annotation plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -10,7 +10,7 @@
10
10
  "atlassian": {
11
11
  "team": "Editor: AI",
12
12
  "singleton": true,
13
- "runReact18": true
13
+ "runReact18": false
14
14
  },
15
15
  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
16
16
  "main": "dist/cjs/index.js",
@@ -32,17 +32,21 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@atlaskit/adf-schema": "^42.3.1",
35
- "@atlaskit/editor-common": "^94.0.0",
35
+ "@atlaskit/editor-common": "^94.8.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.10.0",
37
37
  "@atlaskit/editor-plugin-editor-viewmode-effects": "^1.1.0",
38
+ "@atlaskit/editor-plugin-engagement-platform": "^2.1.0",
38
39
  "@atlaskit/editor-plugin-feature-flags": "^1.2.0",
39
40
  "@atlaskit/editor-prosemirror": "6.0.0",
40
- "@atlaskit/icon": "^22.23.0",
41
+ "@atlaskit/icon": "^22.24.0",
42
+ "@atlaskit/onboarding": "^11.2.0",
41
43
  "@atlaskit/platform-feature-flags": "^0.3.0",
44
+ "@atlaskit/tmp-editor-statsig": "^2.10.0",
42
45
  "@babel/runtime": "^7.0.0"
43
46
  },
44
47
  "peerDependencies": {
45
- "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
48
+ "react": "^16.8.0 || ^17.0.0 || ~18.2.0",
49
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.2.0"
46
50
  },
47
51
  "devDependencies": {
48
52
  "@af/integration-testing": "*",
@@ -50,7 +54,6 @@
50
54
  "@atlaskit/ssr": "*",
51
55
  "@atlaskit/visual-regression": "*",
52
56
  "@testing-library/react": "^12.1.5",
53
- "react-dom": "^16.8.0",
54
57
  "typescript": "~5.4.2",
55
58
  "wait-for-expect": "^1.2.0"
56
59
  },
@@ -90,6 +93,9 @@
90
93
  "platform-feature-flags": {
91
94
  "editor_inline_comments_on_inline_nodes": {
92
95
  "type": "boolean"
96
+ },
97
+ "editor_inline_comments_on_inline_nodes_spotlight": {
98
+ "type": "boolean"
93
99
  }
94
100
  }
95
101
  }