@atlaskit/editor-plugin-annotation 3.1.4 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-annotation
 
+## 3.2.0
+
+### Minor Changes
+
+- [#197019](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/197019)
+  [`96717455eea97`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/96717455eea97) -
+  Create a new toolbar export from editor-common, add useEditorToolbar and EditorToolbarProvider
+  react context components to pass editorView to children toolbar components.
+
+  Add `@atlaskit/editor-plugin-toolbar`, `@atlaskit/editor-toolbar` and
+  `@atlaskit/editor-toolbar-model` as depedencies.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.1.4
 
 ### Patch Changes

package/dist/cjs/annotationPlugin.js

@@ -17,6 +17,7 @@ var _keymap = require("./pm-plugins/keymap");
 var _toolbar = require("./pm-plugins/toolbar");
 var _utils = require("./pm-plugins/utils");
 var _InlineCommentView = require("./ui/InlineCommentView");
+var _toolbarComponents = require("./ui/toolbar-components");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var annotationPlugin = exports.annotationPlugin = function annotationPlugin(_ref) {
@@ -24,6 +25,10 @@ var annotationPlugin = exports.annotationPlugin = function annotationPlugin(_ref
   var annotationProviders = _ref.config,
     api = _ref.api;
   var featureFlags = api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState();
+  if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true)) {
+    var _api$toolbar;
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)(api, annotationProviders));
+  }
   return {
     name: 'annotation',
     marks: function marks() {
@@ -90,6 +95,9 @@ var annotationPlugin = exports.annotationPlugin = function annotationPlugin(_ref
         }
       },
       selectionToolbar: function selectionToolbar(state, intl) {
+        if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true)) {
+          return;
+        }
         if (!annotationProviders) {
           return;
         }

package/dist/cjs/ui/CommentButton/CommentButton.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CommentButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _utils = require("../../pm-plugins/utils");
+var _types = require("../../types");
+var _hooks = require("./hooks");
+var _utils2 = require("./utils");
+var CommentButton = exports.CommentButton = function CommentButton(_ref) {
+  var api = _ref.api,
+    annotationProviders = _ref.annotationProviders;
+  var isVisible = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.isVisible');
+  var bookmark = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.bookmark');
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  var _ref2 = editorView !== null && editorView !== void 0 ? editorView : {
+      state: null,
+      dispatch: null
+    },
+    state = _ref2.state,
+    dispatch = _ref2.dispatch;
+  var annotationSelectionType = state ? (0, _utils.isSelectionValid)(state) : _types.AnnotationSelectionType.INVALID;
+  (0, _hooks.useCommentButtonMount)({
+    state: state,
+    annotationProviders: annotationProviders,
+    api: api,
+    annotationSelectionType: annotationSelectionType,
+    bookmark: bookmark
+  });
+  var intl = (0, _reactIntlNext.useIntl)();
+  var onClick = function onClick() {
+    if (!api || !state || !dispatch || !annotationProviders) {
+      return;
+    }
+    (0, _utils2.fireOnClickAnalyticsEvent)({
+      api: api
+    });
+    (0, _utils2.startCommentExperience)({
+      annotationProviders: annotationProviders,
+      api: api,
+      state: state,
+      dispatch: dispatch
+    });
+  };
+  if (!(0, _utils2.shouldShowCommentButton)({
+    state: state,
+    isVisible: isVisible,
+    annotationSelectionType: annotationSelectionType
+  })) {
+    return null;
+  }
+  var commentMessage = intl.formatMessage(_messages.annotationMessages.createComment);
+  var commentDisabledMessage = intl.formatMessage((0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? _messages.annotationMessages.createCommentDisabled : _messages.annotationMessages.createCommentInvalid);
+  var isDisabled = (0, _utils2.isButtonDisabled)({
+    state: state,
+    api: api
+  });
+  return (
+    /*#__PURE__*/
+    // TODO: ED-28743 - add keyboard shortcut here
+    _react.default.createElement(_editorToolbar.ToolbarTooltip, {
+      content: isDisabled ? commentDisabledMessage : commentMessage
+    }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+      iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.CommentIcon, {
+        label: ""
+      }),
+      onClick: onClick,
+      testId: _types.AnnotationTestIds.floatingToolbarCreateButton,
+      isDisabled: isDisabled
+    }, commentMessage))
+  );
+};

package/dist/cjs/ui/CommentButton/hooks.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCommentButtonMount = void 0;
+var _react = require("react");
+var _utils = require("@atlaskit/editor-common/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _utils2 = require("../../pm-plugins/utils");
+var _utils3 = require("./utils");
+var useCommentButtonMount = exports.useCommentButtonMount = function useCommentButtonMount(_ref) {
+  var state = _ref.state,
+    annotationProviders = _ref.annotationProviders,
+    api = _ref.api,
+    annotationSelectionType = _ref.annotationSelectionType,
+    bookmark = _ref.bookmark;
+  (0, _react.useEffect)(function () {
+    var _getRangeInlineNodeNa;
+    if (!state) {
+      return;
+    }
+    if (annotationProviders !== null && annotationProviders !== void 0 && annotationProviders.inlineComment && (0, _platformFeatureFlags.fg)('confluence_frontend_preload_inline_comment_editor')) {
+      var _annotationProviders$, _annotationProviders$2;
+      (_annotationProviders$ = (_annotationProviders$2 = annotationProviders.inlineComment).onCommentButtonMount) === null || _annotationProviders$ === void 0 || _annotationProviders$.call(_annotationProviders$2);
+    }
+    // Check if the selection includes an non-text inline node
+    var inlineNodeNames = (_getRangeInlineNodeNa = (0, _utils.getRangeInlineNodeNames)({
+      doc: state.doc,
+      pos: (0, _utils2.resolveDraftBookmark)(state, bookmark)
+    })) !== null && _getRangeInlineNodeNa !== void 0 ? _getRangeInlineNodeNa : [];
+    var isNonTextInlineNodeInludedInComment = inlineNodeNames.filter(function (nodeName) {
+      return nodeName !== 'text';
+    }).length > 0;
+    (0, _utils3.fireCommentButtonViewedAnalyticsEvent)({
+      api: api,
+      isNonTextInlineNodeInludedInComment: isNonTextInlineNodeInludedInComment,
+      annotationSelectionType: annotationSelectionType
+    });
+    // for now trying to replicate current onMount logic
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

package/dist/cjs/ui/CommentButton/utils.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.startCommentExperience = exports.shouldShowCommentButton = exports.isButtonDisabled = exports.fireOnClickAnalyticsEvent = exports.fireCommentButtonViewedAnalyticsEvent = exports.fireAnnotationErrorAnalyticsEvent = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
+var _editorCommands = require("../../editor-commands");
+var _utils = require("../../pm-plugins/utils");
+var _types = require("../../types");
+var isButtonDisabled = exports.isButtonDisabled = function isButtonDisabled(_ref) {
+  var _api$connectivity;
+  var state = _ref.state,
+    api = _ref.api;
+  var annotationSelectionType = state ? (0, _utils.isSelectionValid)(state) : _types.AnnotationSelectionType.INVALID;
+  return annotationSelectionType === _types.AnnotationSelectionType.DISABLED || (api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode) === 'offline';
+};
+var shouldShowCommentButton = exports.shouldShowCommentButton = function shouldShowCommentButton(_ref2) {
+  var state = _ref2.state,
+    isVisible = _ref2.isVisible,
+    annotationSelectionType = _ref2.annotationSelectionType;
+  var isMediaSelected = state ? (0, _mediaSingle.currentMediaNodeWithPos)(state) : false;
+
+  // comments on media can only be added via media floating toolbar
+  if (isMediaSelected || annotationSelectionType === _types.AnnotationSelectionType.INVALID || !isVisible) {
+    return false;
+  }
+  return true;
+};
+var fireOnClickAnalyticsEvent = exports.fireOnClickAnalyticsEvent = function fireOnClickAnalyticsEvent(_ref3) {
+  var _api$analytics;
+  var api = _ref3.api;
+  (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
+    action: _analytics.ACTION.CLICKED,
+    actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.CREATE_INLINE_COMMENT_FROM_HIGHLIGHT_ACTIONS_MENU,
+    eventType: _analytics.EVENT_TYPE.UI,
+    attributes: {
+      source: 'highlightActionsMenu',
+      pageMode: 'edit'
+    }
+  });
+};
+var fireAnnotationErrorAnalyticsEvent = exports.fireAnnotationErrorAnalyticsEvent = function fireAnnotationErrorAnalyticsEvent(_ref4) {
+  var _api$analytics2;
+  var api = _ref4.api,
+    errorReason = _ref4.errorReason;
+  (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.fireAnalyticsEvent({
+    action: _analytics.ACTION.ERROR,
+    actionSubject: _analytics.ACTION_SUBJECT.ANNOTATION,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
+    eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+    attributes: {
+      errorReason: errorReason
+    }
+  });
+};
+var fireCommentButtonViewedAnalyticsEvent = exports.fireCommentButtonViewedAnalyticsEvent = function fireCommentButtonViewedAnalyticsEvent(_ref5) {
+  var _api$analytics3;
+  var api = _ref5.api,
+    isNonTextInlineNodeInludedInComment = _ref5.isNonTextInlineNodeInludedInComment,
+    annotationSelectionType = _ref5.annotationSelectionType;
+  api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || _api$analytics3.actions.fireAnalyticsEvent({
+    action: _analytics.ACTION.VIEWED,
+    actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
+    eventType: _analytics.EVENT_TYPE.UI,
+    attributes: {
+      isNonTextInlineNodeInludedInComment: isNonTextInlineNodeInludedInComment,
+      isDisabled: annotationSelectionType === _types.AnnotationSelectionType.DISABLED,
+      inputMethod: _analytics.INPUT_METHOD.FLOATING_TB,
+      mode: _analytics.MODE.EDITOR
+    }
+  });
+};
+var startCommentExperience = exports.startCommentExperience = function startCommentExperience(_ref6) {
+  var annotationProviders = _ref6.annotationProviders,
+    api = _ref6.api,
+    state = _ref6.state,
+    dispatch = _ref6.dispatch;
+  var annotationManager = annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.annotationManager;
+  if (annotationManager) {
+    annotationManager.checkPreemptiveGate().then(function (canStartDraft) {
+      if (canStartDraft) {
+        var _annotationProviders$, _annotationProviders$2;
+        (_annotationProviders$ = annotationProviders.createCommentExperience) === null || _annotationProviders$ === void 0 || _annotationProviders$.start({
+          attributes: {
+            pageClass: 'editor',
+            commentType: 'inline'
+          }
+        });
+        (_annotationProviders$2 = annotationProviders.createCommentExperience) === null || _annotationProviders$2 === void 0 || _annotationProviders$2.initExperience.start();
+        var result = annotationManager.startDraft();
+        if (!result.success) {
+          // Fire an analytics event to indicate that the user has clicked the button
+          // but the action was not completed, the result should contain a reason.
+          fireAnnotationErrorAnalyticsEvent({
+            api: api,
+            errorReason: "toolbar-start-draft-failed/".concat(result.reason)
+          });
+        }
+      }
+    }).catch(function () {
+      fireAnnotationErrorAnalyticsEvent({
+        api: api,
+        errorReason: "toolbar-start-draft-preemptive-gate-error"
+      });
+    });
+    return true;
+  } else {
+    var _annotationProviders$3, _annotationProviders$4, _api$analytics4;
+    annotationProviders === null || annotationProviders === void 0 || (_annotationProviders$3 = annotationProviders.createCommentExperience) === null || _annotationProviders$3 === void 0 || _annotationProviders$3.start({
+      attributes: {
+        pageClass: 'editor',
+        commentType: 'inline'
+      }
+    });
+    annotationProviders === null || annotationProviders === void 0 || (_annotationProviders$4 = annotationProviders.createCommentExperience) === null || _annotationProviders$4 === void 0 || _annotationProviders$4.initExperience.start();
+    return (0, _editorCommands.setInlineCommentDraftState)(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(true)(state, dispatch);
+  }
+};

package/dist/cjs/ui/toolbar-components.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getToolbarComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _CommentButton = require("./CommentButton/CommentButton");
+var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api, annotationProviders) {
+  return [{
+    type: _toolbar.COLLAB_SECTION.type,
+    key: _toolbar.COLLAB_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: _toolbar.TOOLBAR_RANK[_toolbar.COLLAB_SECTION.key]
+    }]
+  }, {
+    type: _toolbar.COMMENT_GROUP.type,
+    key: _toolbar.COMMENT_GROUP.key,
+    parents: [{
+      type: _toolbar.COLLAB_SECTION.type,
+      key: _toolbar.COLLAB_SECTION.key,
+      rank: _toolbar.TOOLBAR_RANK[_toolbar.COLLAB_SECTION.key]
+    }]
+  }, {
+    type: _toolbar.COMMENT_HERO_BUTTON.type,
+    key: _toolbar.COMMENT_HERO_BUTTON.key,
+    parents: [{
+      type: _toolbar.COMMENT_GROUP.type,
+      key: _toolbar.COMMENT_GROUP.key,
+      rank: _toolbar.COLLAB_SECTION_RANK[_toolbar.COMMENT_GROUP.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_CommentButton.CommentButton, {
+        api: api,
+        annotationProviders: annotationProviders
+      });
+    }
+  }];
+};

package/dist/es2019/annotationPlugin.js

@@ -9,12 +9,17 @@ import { keymapPlugin } from './pm-plugins/keymap';
 import { buildSuppressedToolbar, buildToolbar, shouldSuppressFloatingToolbar } from './pm-plugins/toolbar';
 import { getPluginState, hasAnyUnResolvedAnnotationInPage, stripNonExistingAnnotations } from './pm-plugins/utils';
 import { InlineCommentView } from './ui/InlineCommentView';
+import { getToolbarComponents } from './ui/toolbar-components';
 export const annotationPlugin = ({
   config: annotationProviders,
   api
 }) => {
   var _api$featureFlags, _api$analytics;
   const featureFlags = api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState();
+  if (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true)) {
+    var _api$toolbar;
+    api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponents(api, annotationProviders));
+  }
   return {
     name: 'annotation',
     marks() {
@@ -80,6 +85,9 @@ export const annotationPlugin = ({
         }
       },
       selectionToolbar(state, intl) {
+        if (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true)) {
+          return;
+        }
         if (!annotationProviders) {
           return;
         }

package/dist/es2019/ui/CommentButton/CommentButton.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { annotationMessages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { ToolbarButton, CommentIcon as NewCommentIcon, ToolbarTooltip } from '@atlaskit/editor-toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { isSelectionValid } from '../../pm-plugins/utils';
+import { AnnotationSelectionType, AnnotationTestIds } from '../../types';
+import { useCommentButtonMount } from './hooks';
+import { fireOnClickAnalyticsEvent, isButtonDisabled, shouldShowCommentButton, startCommentExperience } from './utils';
+export const CommentButton = ({
+  api,
+  annotationProviders
+}) => {
+  const isVisible = useSharedPluginStateSelector(api, 'annotation.isVisible');
+  const bookmark = useSharedPluginStateSelector(api, 'annotation.bookmark');
+  const {
+    editorView
+  } = useEditorToolbar();
+  const {
+    state,
+    dispatch
+  } = editorView !== null && editorView !== void 0 ? editorView : {
+    state: null,
+    dispatch: null
+  };
+  const annotationSelectionType = state ? isSelectionValid(state) : AnnotationSelectionType.INVALID;
+  useCommentButtonMount({
+    state,
+    annotationProviders,
+    api,
+    annotationSelectionType,
+    bookmark
+  });
+  const intl = useIntl();
+  const onClick = () => {
+    if (!api || !state || !dispatch || !annotationProviders) {
+      return;
+    }
+    fireOnClickAnalyticsEvent({
+      api
+    });
+    startCommentExperience({
+      annotationProviders,
+      api,
+      state,
+      dispatch
+    });
+  };
+  if (!shouldShowCommentButton({
+    state,
+    isVisible,
+    annotationSelectionType
+  })) {
+    return null;
+  }
+  const commentMessage = intl.formatMessage(annotationMessages.createComment);
+  const commentDisabledMessage = intl.formatMessage(fg('editor_inline_comments_on_inline_nodes') ? annotationMessages.createCommentDisabled : annotationMessages.createCommentInvalid);
+  const isDisabled = isButtonDisabled({
+    state,
+    api
+  });
+  return (
+    /*#__PURE__*/
+    // TODO: ED-28743 - add keyboard shortcut here
+    React.createElement(ToolbarTooltip, {
+      content: isDisabled ? commentDisabledMessage : commentMessage
+    }, /*#__PURE__*/React.createElement(ToolbarButton, {
+      iconBefore: /*#__PURE__*/React.createElement(NewCommentIcon, {
+        label: ""
+      }),
+      onClick: onClick,
+      testId: AnnotationTestIds.floatingToolbarCreateButton,
+      isDisabled: isDisabled
+    }, commentMessage))
+  );
+};

package/dist/es2019/ui/CommentButton/hooks.js

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { getRangeInlineNodeNames } from '@atlaskit/editor-common/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { resolveDraftBookmark } from '../../pm-plugins/utils';
+import { fireCommentButtonViewedAnalyticsEvent } from './utils';
+export const useCommentButtonMount = ({
+  state,
+  annotationProviders,
+  api,
+  annotationSelectionType,
+  bookmark
+}) => {
+  useEffect(() => {
+    var _getRangeInlineNodeNa;
+    if (!state) {
+      return;
+    }
+    if (annotationProviders !== null && annotationProviders !== void 0 && annotationProviders.inlineComment && fg('confluence_frontend_preload_inline_comment_editor')) {
+      var _annotationProviders$, _annotationProviders$2;
+      (_annotationProviders$ = (_annotationProviders$2 = annotationProviders.inlineComment).onCommentButtonMount) === null || _annotationProviders$ === void 0 ? void 0 : _annotationProviders$.call(_annotationProviders$2);
+    }
+    // Check if the selection includes an non-text inline node
+    const inlineNodeNames = (_getRangeInlineNodeNa = getRangeInlineNodeNames({
+      doc: state.doc,
+      pos: resolveDraftBookmark(state, bookmark)
+    })) !== null && _getRangeInlineNodeNa !== void 0 ? _getRangeInlineNodeNa : [];
+    const isNonTextInlineNodeInludedInComment = inlineNodeNames.filter(nodeName => nodeName !== 'text').length > 0;
+    fireCommentButtonViewedAnalyticsEvent({
+      api,
+      isNonTextInlineNodeInludedInComment,
+      annotationSelectionType
+    });
+    // for now trying to replicate current onMount logic
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

package/dist/es2019/ui/CommentButton/utils.js

@@ -0,0 +1,122 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, MODE } from '@atlaskit/editor-common/analytics';
+import { currentMediaNodeWithPos } from '@atlaskit/editor-common/media-single';
+import { setInlineCommentDraftState } from '../../editor-commands';
+import { isSelectionValid } from '../../pm-plugins/utils';
+import { AnnotationSelectionType } from '../../types';
+export const isButtonDisabled = ({
+  state,
+  api
+}) => {
+  var _api$connectivity, _api$connectivity$sha, _api$connectivity$sha2;
+  const annotationSelectionType = state ? isSelectionValid(state) : AnnotationSelectionType.INVALID;
+  return annotationSelectionType === AnnotationSelectionType.DISABLED || (api === null || api === void 0 ? void 0 : (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : (_api$connectivity$sha = _api$connectivity.sharedState) === null || _api$connectivity$sha === void 0 ? void 0 : (_api$connectivity$sha2 = _api$connectivity$sha.currentState()) === null || _api$connectivity$sha2 === void 0 ? void 0 : _api$connectivity$sha2.mode) === 'offline';
+};
+export const shouldShowCommentButton = ({
+  state,
+  isVisible,
+  annotationSelectionType
+}) => {
+  const isMediaSelected = state ? currentMediaNodeWithPos(state) : false;
+
+  // comments on media can only be added via media floating toolbar
+  if (isMediaSelected || annotationSelectionType === AnnotationSelectionType.INVALID || !isVisible) {
+    return false;
+  }
+  return true;
+};
+export const fireOnClickAnalyticsEvent = ({
+  api
+}) => {
+  var _api$analytics;
+  (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent({
+    action: ACTION.CLICKED,
+    actionSubject: ACTION_SUBJECT.BUTTON,
+    actionSubjectId: ACTION_SUBJECT_ID.CREATE_INLINE_COMMENT_FROM_HIGHLIGHT_ACTIONS_MENU,
+    eventType: EVENT_TYPE.UI,
+    attributes: {
+      source: 'highlightActionsMenu',
+      pageMode: 'edit'
+    }
+  });
+};
+export const fireAnnotationErrorAnalyticsEvent = ({
+  api,
+  errorReason
+}) => {
+  var _api$analytics2, _api$analytics2$actio;
+  (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : (_api$analytics2$actio = _api$analytics2.actions) === null || _api$analytics2$actio === void 0 ? void 0 : _api$analytics2$actio.fireAnalyticsEvent({
+    action: ACTION.ERROR,
+    actionSubject: ACTION_SUBJECT.ANNOTATION,
+    actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
+    eventType: EVENT_TYPE.OPERATIONAL,
+    attributes: {
+      errorReason
+    }
+  });
+};
+export const fireCommentButtonViewedAnalyticsEvent = ({
+  api,
+  isNonTextInlineNodeInludedInComment,
+  annotationSelectionType
+}) => {
+  var _api$analytics3;
+  api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent({
+    action: ACTION.VIEWED,
+    actionSubject: ACTION_SUBJECT.BUTTON,
+    actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
+    eventType: EVENT_TYPE.UI,
+    attributes: {
+      isNonTextInlineNodeInludedInComment,
+      isDisabled: annotationSelectionType === AnnotationSelectionType.DISABLED,
+      inputMethod: INPUT_METHOD.FLOATING_TB,
+      mode: MODE.EDITOR
+    }
+  });
+};
+export const startCommentExperience = ({
+  annotationProviders,
+  api,
+  state,
+  dispatch
+}) => {
+  const annotationManager = annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.annotationManager;
+  if (annotationManager) {
+    annotationManager.checkPreemptiveGate().then(canStartDraft => {
+      if (canStartDraft) {
+        var _annotationProviders$, _annotationProviders$2;
+        (_annotationProviders$ = annotationProviders.createCommentExperience) === null || _annotationProviders$ === void 0 ? void 0 : _annotationProviders$.start({
+          attributes: {
+            pageClass: 'editor',
+            commentType: 'inline'
+          }
+        });
+        (_annotationProviders$2 = annotationProviders.createCommentExperience) === null || _annotationProviders$2 === void 0 ? void 0 : _annotationProviders$2.initExperience.start();
+        const result = annotationManager.startDraft();
+        if (!result.success) {
+          // Fire an analytics event to indicate that the user has clicked the button
+          // but the action was not completed, the result should contain a reason.
+          fireAnnotationErrorAnalyticsEvent({
+            api,
+            errorReason: `toolbar-start-draft-failed/${result.reason}`
+          });
+        }
+      }
+    }).catch(() => {
+      fireAnnotationErrorAnalyticsEvent({
+        api,
+        errorReason: `toolbar-start-draft-preemptive-gate-error`
+      });
+    });
+    return true;
+  } else {
+    var _annotationProviders$3, _annotationProviders$4, _api$analytics4;
+    annotationProviders === null || annotationProviders === void 0 ? void 0 : (_annotationProviders$3 = annotationProviders.createCommentExperience) === null || _annotationProviders$3 === void 0 ? void 0 : _annotationProviders$3.start({
+      attributes: {
+        pageClass: 'editor',
+        commentType: 'inline'
+      }
+    });
+    annotationProviders === null || annotationProviders === void 0 ? void 0 : (_annotationProviders$4 = annotationProviders.createCommentExperience) === null || _annotationProviders$4 === void 0 ? void 0 : _annotationProviders$4.initExperience.start();
+    return setInlineCommentDraftState(api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(true)(state, dispatch);
+  }
+};

package/dist/es2019/ui/toolbar-components.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { TOOLBARS, COLLAB_SECTION, TOOLBAR_RANK, COMMENT_GROUP, COLLAB_SECTION_RANK, COMMENT_HERO_BUTTON } from '@atlaskit/editor-common/toolbar';
+import { CommentButton } from './CommentButton/CommentButton';
+export const getToolbarComponents = (api, annotationProviders) => {
+  return [{
+    type: COLLAB_SECTION.type,
+    key: COLLAB_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: TOOLBAR_RANK[COLLAB_SECTION.key]
+    }]
+  }, {
+    type: COMMENT_GROUP.type,
+    key: COMMENT_GROUP.key,
+    parents: [{
+      type: COLLAB_SECTION.type,
+      key: COLLAB_SECTION.key,
+      rank: TOOLBAR_RANK[COLLAB_SECTION.key]
+    }]
+  }, {
+    type: COMMENT_HERO_BUTTON.type,
+    key: COMMENT_HERO_BUTTON.key,
+    parents: [{
+      type: COMMENT_GROUP.type,
+      key: COMMENT_GROUP.key,
+      rank: COLLAB_SECTION_RANK[COMMENT_GROUP.key]
+    }],
+    component: () => {
+      return /*#__PURE__*/React.createElement(CommentButton, {
+        api: api,
+        annotationProviders: annotationProviders
+      });
+    }
+  }];
+};

package/dist/esm/annotationPlugin.js

@@ -12,11 +12,16 @@ import { keymapPlugin } from './pm-plugins/keymap';
 import { buildSuppressedToolbar, buildToolbar, shouldSuppressFloatingToolbar } from './pm-plugins/toolbar';
 import { getPluginState, hasAnyUnResolvedAnnotationInPage, stripNonExistingAnnotations } from './pm-plugins/utils';
 import { InlineCommentView } from './ui/InlineCommentView';
+import { getToolbarComponents } from './ui/toolbar-components';
 export var annotationPlugin = function annotationPlugin(_ref) {
   var _api$featureFlags, _api$analytics;
   var annotationProviders = _ref.config,
     api = _ref.api;
   var featureFlags = api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState();
+  if (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true)) {
+    var _api$toolbar;
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents(getToolbarComponents(api, annotationProviders));
+  }
   return {
     name: 'annotation',
     marks: function marks() {
@@ -83,6 +88,9 @@ export var annotationPlugin = function annotationPlugin(_ref) {
         }
       },
       selectionToolbar: function selectionToolbar(state, intl) {
+        if (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true)) {
+          return;
+        }
         if (!annotationProviders) {
           return;
         }

package/dist/esm/ui/CommentButton/CommentButton.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { annotationMessages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { ToolbarButton, CommentIcon as NewCommentIcon, ToolbarTooltip } from '@atlaskit/editor-toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { isSelectionValid } from '../../pm-plugins/utils';
+import { AnnotationSelectionType, AnnotationTestIds } from '../../types';
+import { useCommentButtonMount } from './hooks';
+import { fireOnClickAnalyticsEvent, isButtonDisabled, shouldShowCommentButton, startCommentExperience } from './utils';
+export var CommentButton = function CommentButton(_ref) {
+  var api = _ref.api,
+    annotationProviders = _ref.annotationProviders;
+  var isVisible = useSharedPluginStateSelector(api, 'annotation.isVisible');
+  var bookmark = useSharedPluginStateSelector(api, 'annotation.bookmark');
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
+  var _ref2 = editorView !== null && editorView !== void 0 ? editorView : {
+      state: null,
+      dispatch: null
+    },
+    state = _ref2.state,
+    dispatch = _ref2.dispatch;
+  var annotationSelectionType = state ? isSelectionValid(state) : AnnotationSelectionType.INVALID;
+  useCommentButtonMount({
+    state: state,
+    annotationProviders: annotationProviders,
+    api: api,
+    annotationSelectionType: annotationSelectionType,
+    bookmark: bookmark
+  });
+  var intl = useIntl();
+  var onClick = function onClick() {
+    if (!api || !state || !dispatch || !annotationProviders) {
+      return;
+    }
+    fireOnClickAnalyticsEvent({
+      api: api
+    });
+    startCommentExperience({
+      annotationProviders: annotationProviders,
+      api: api,
+      state: state,
+      dispatch: dispatch
+    });
+  };
+  if (!shouldShowCommentButton({
+    state: state,
+    isVisible: isVisible,
+    annotationSelectionType: annotationSelectionType
+  })) {
+    return null;
+  }
+  var commentMessage = intl.formatMessage(annotationMessages.createComment);
+  var commentDisabledMessage = intl.formatMessage(fg('editor_inline_comments_on_inline_nodes') ? annotationMessages.createCommentDisabled : annotationMessages.createCommentInvalid);
+  var isDisabled = isButtonDisabled({
+    state: state,
+    api: api
+  });
+  return (
+    /*#__PURE__*/
+    // TODO: ED-28743 - add keyboard shortcut here
+    React.createElement(ToolbarTooltip, {
+      content: isDisabled ? commentDisabledMessage : commentMessage
+    }, /*#__PURE__*/React.createElement(ToolbarButton, {
+      iconBefore: /*#__PURE__*/React.createElement(NewCommentIcon, {
+        label: ""
+      }),
+      onClick: onClick,
+      testId: AnnotationTestIds.floatingToolbarCreateButton,
+      isDisabled: isDisabled
+    }, commentMessage))
+  );
+};

package/dist/esm/ui/CommentButton/hooks.js

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+import { getRangeInlineNodeNames } from '@atlaskit/editor-common/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { resolveDraftBookmark } from '../../pm-plugins/utils';
+import { fireCommentButtonViewedAnalyticsEvent } from './utils';
+export var useCommentButtonMount = function useCommentButtonMount(_ref) {
+  var state = _ref.state,
+    annotationProviders = _ref.annotationProviders,
+    api = _ref.api,
+    annotationSelectionType = _ref.annotationSelectionType,
+    bookmark = _ref.bookmark;
+  useEffect(function () {
+    var _getRangeInlineNodeNa;
+    if (!state) {
+      return;
+    }
+    if (annotationProviders !== null && annotationProviders !== void 0 && annotationProviders.inlineComment && fg('confluence_frontend_preload_inline_comment_editor')) {
+      var _annotationProviders$, _annotationProviders$2;
+      (_annotationProviders$ = (_annotationProviders$2 = annotationProviders.inlineComment).onCommentButtonMount) === null || _annotationProviders$ === void 0 || _annotationProviders$.call(_annotationProviders$2);
+    }
+    // Check if the selection includes an non-text inline node
+    var inlineNodeNames = (_getRangeInlineNodeNa = getRangeInlineNodeNames({
+      doc: state.doc,
+      pos: resolveDraftBookmark(state, bookmark)
+    })) !== null && _getRangeInlineNodeNa !== void 0 ? _getRangeInlineNodeNa : [];
+    var isNonTextInlineNodeInludedInComment = inlineNodeNames.filter(function (nodeName) {
+      return nodeName !== 'text';
+    }).length > 0;
+    fireCommentButtonViewedAnalyticsEvent({
+      api: api,
+      isNonTextInlineNodeInludedInComment: isNonTextInlineNodeInludedInComment,
+      annotationSelectionType: annotationSelectionType
+    });
+    // for now trying to replicate current onMount logic
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

package/dist/esm/ui/CommentButton/utils.js

@@ -0,0 +1,116 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, MODE } from '@atlaskit/editor-common/analytics';
+import { currentMediaNodeWithPos } from '@atlaskit/editor-common/media-single';
+import { setInlineCommentDraftState } from '../../editor-commands';
+import { isSelectionValid } from '../../pm-plugins/utils';
+import { AnnotationSelectionType } from '../../types';
+export var isButtonDisabled = function isButtonDisabled(_ref) {
+  var _api$connectivity;
+  var state = _ref.state,
+    api = _ref.api;
+  var annotationSelectionType = state ? isSelectionValid(state) : AnnotationSelectionType.INVALID;
+  return annotationSelectionType === AnnotationSelectionType.DISABLED || (api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode) === 'offline';
+};
+export var shouldShowCommentButton = function shouldShowCommentButton(_ref2) {
+  var state = _ref2.state,
+    isVisible = _ref2.isVisible,
+    annotationSelectionType = _ref2.annotationSelectionType;
+  var isMediaSelected = state ? currentMediaNodeWithPos(state) : false;
+
+  // comments on media can only be added via media floating toolbar
+  if (isMediaSelected || annotationSelectionType === AnnotationSelectionType.INVALID || !isVisible) {
+    return false;
+  }
+  return true;
+};
+export var fireOnClickAnalyticsEvent = function fireOnClickAnalyticsEvent(_ref3) {
+  var _api$analytics;
+  var api = _ref3.api;
+  (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
+    action: ACTION.CLICKED,
+    actionSubject: ACTION_SUBJECT.BUTTON,
+    actionSubjectId: ACTION_SUBJECT_ID.CREATE_INLINE_COMMENT_FROM_HIGHLIGHT_ACTIONS_MENU,
+    eventType: EVENT_TYPE.UI,
+    attributes: {
+      source: 'highlightActionsMenu',
+      pageMode: 'edit'
+    }
+  });
+};
+export var fireAnnotationErrorAnalyticsEvent = function fireAnnotationErrorAnalyticsEvent(_ref4) {
+  var _api$analytics2;
+  var api = _ref4.api,
+    errorReason = _ref4.errorReason;
+  (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.fireAnalyticsEvent({
+    action: ACTION.ERROR,
+    actionSubject: ACTION_SUBJECT.ANNOTATION,
+    actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
+    eventType: EVENT_TYPE.OPERATIONAL,
+    attributes: {
+      errorReason: errorReason
+    }
+  });
+};
+export var fireCommentButtonViewedAnalyticsEvent = function fireCommentButtonViewedAnalyticsEvent(_ref5) {
+  var _api$analytics3;
+  var api = _ref5.api,
+    isNonTextInlineNodeInludedInComment = _ref5.isNonTextInlineNodeInludedInComment,
+    annotationSelectionType = _ref5.annotationSelectionType;
+  api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || _api$analytics3.actions.fireAnalyticsEvent({
+    action: ACTION.VIEWED,
+    actionSubject: ACTION_SUBJECT.BUTTON,
+    actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
+    eventType: EVENT_TYPE.UI,
+    attributes: {
+      isNonTextInlineNodeInludedInComment: isNonTextInlineNodeInludedInComment,
+      isDisabled: annotationSelectionType === AnnotationSelectionType.DISABLED,
+      inputMethod: INPUT_METHOD.FLOATING_TB,
+      mode: MODE.EDITOR
+    }
+  });
+};
+export var startCommentExperience = function startCommentExperience(_ref6) {
+  var annotationProviders = _ref6.annotationProviders,
+    api = _ref6.api,
+    state = _ref6.state,
+    dispatch = _ref6.dispatch;
+  var annotationManager = annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.annotationManager;
+  if (annotationManager) {
+    annotationManager.checkPreemptiveGate().then(function (canStartDraft) {
+      if (canStartDraft) {
+        var _annotationProviders$, _annotationProviders$2;
+        (_annotationProviders$ = annotationProviders.createCommentExperience) === null || _annotationProviders$ === void 0 || _annotationProviders$.start({
+          attributes: {
+            pageClass: 'editor',
+            commentType: 'inline'
+          }
+        });
+        (_annotationProviders$2 = annotationProviders.createCommentExperience) === null || _annotationProviders$2 === void 0 || _annotationProviders$2.initExperience.start();
+        var result = annotationManager.startDraft();
+        if (!result.success) {
+          // Fire an analytics event to indicate that the user has clicked the button
+          // but the action was not completed, the result should contain a reason.
+          fireAnnotationErrorAnalyticsEvent({
+            api: api,
+            errorReason: "toolbar-start-draft-failed/".concat(result.reason)
+          });
+        }
+      }
+    }).catch(function () {
+      fireAnnotationErrorAnalyticsEvent({
+        api: api,
+        errorReason: "toolbar-start-draft-preemptive-gate-error"
+      });
+    });
+    return true;
+  } else {
+    var _annotationProviders$3, _annotationProviders$4, _api$analytics4;
+    annotationProviders === null || annotationProviders === void 0 || (_annotationProviders$3 = annotationProviders.createCommentExperience) === null || _annotationProviders$3 === void 0 || _annotationProviders$3.start({
+      attributes: {
+        pageClass: 'editor',
+        commentType: 'inline'
+      }
+    });
+    annotationProviders === null || annotationProviders === void 0 || (_annotationProviders$4 = annotationProviders.createCommentExperience) === null || _annotationProviders$4 === void 0 || _annotationProviders$4.initExperience.start();
+    return setInlineCommentDraftState(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(true)(state, dispatch);
+  }
+};

package/dist/esm/ui/toolbar-components.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { TOOLBARS, COLLAB_SECTION, TOOLBAR_RANK, COMMENT_GROUP, COLLAB_SECTION_RANK, COMMENT_HERO_BUTTON } from '@atlaskit/editor-common/toolbar';
+import { CommentButton } from './CommentButton/CommentButton';
+export var getToolbarComponents = function getToolbarComponents(api, annotationProviders) {
+  return [{
+    type: COLLAB_SECTION.type,
+    key: COLLAB_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: TOOLBAR_RANK[COLLAB_SECTION.key]
+    }]
+  }, {
+    type: COMMENT_GROUP.type,
+    key: COMMENT_GROUP.key,
+    parents: [{
+      type: COLLAB_SECTION.type,
+      key: COLLAB_SECTION.key,
+      rank: TOOLBAR_RANK[COLLAB_SECTION.key]
+    }]
+  }, {
+    type: COMMENT_HERO_BUTTON.type,
+    key: COMMENT_HERO_BUTTON.key,
+    parents: [{
+      type: COMMENT_GROUP.type,
+      key: COMMENT_GROUP.key,
+      rank: COLLAB_SECTION_RANK[COMMENT_GROUP.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(CommentButton, {
+        api: api,
+        annotationProviders: annotationProviders
+      });
+    }
+  }];
+};

package/dist/types/annotationPluginType.d.ts

@@ -4,6 +4,7 @@ import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { EditorViewModeEffectsPlugin } from '@atlaskit/editor-plugin-editor-viewmode-effects';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { Slice } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { showInlineCommentForBlockNode } from './editor-commands';
@@ -18,7 +19,8 @@ export type AnnotationPluginDependencies = [
     OptionalPlugin<EditorViewModeEffectsPlugin>,
     OptionalPlugin<EditorViewModePlugin>,
     OptionalPlugin<FeatureFlagsPlugin>,
-    OptionalPlugin<ConnectivityPlugin>
+    OptionalPlugin<ConnectivityPlugin>,
+    OptionalPlugin<ToolbarPlugin>
 ];
 export type AnnotationPluginOptions = AnnotationProviders;
 export type AnnotationPlugin = NextEditorPlugin<'annotation', {

package/dist/types/ui/CommentButton/CommentButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { AnnotationPlugin } from '../../annotationPluginType';
+import { type AnnotationProviders } from '../../types';
+type CommentButtonProps = {
+    api?: ExtractInjectionAPI<AnnotationPlugin>;
+    annotationProviders?: AnnotationProviders;
+};
+export declare const CommentButton: ({ api, annotationProviders }: CommentButtonProps) => React.JSX.Element | null;
+export {};

package/dist/types/ui/CommentButton/hooks.d.ts

@@ -0,0 +1,22 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type EditorState, type SelectionBookmark } from '@atlaskit/editor-prosemirror/state';
+import type { AnnotationPlugin } from '../../annotationPluginType';
+import type { AnnotationSelectionType } from '../../types';
+import { type AnnotationProviders } from '../../types';
+export declare const useCommentButtonMount: ({ state, annotationProviders, api, annotationSelectionType, bookmark, }: {
+    state: EditorState | null;
+    annotationProviders?: AnnotationProviders | undefined;
+    api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"annotation", {
+        pluginConfiguration: AnnotationProviders | undefined;
+        sharedState: import("../..").InlineCommentPluginState | undefined;
+        dependencies: import("../../annotationPluginType").AnnotationPluginDependencies;
+        actions: {
+            stripNonExistingAnnotations: (slice: import("prosemirror-model").Slice, state: EditorState) => boolean | undefined;
+            setInlineCommentDraftState: (drafting: boolean, inputMethod: import("../../types").InlineCommentInputMethod, targetType?: import("../../types").TargetType | undefined, targetNodeId?: string | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => import("@atlaskit/editor-common/types").Command;
+            showCommentForBlockNode: (node: import("prosemirror-model").Node | null, viewMethod?: import("@atlaskit/editor-common/analytics").VIEW_METHOD | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => import("@atlaskit/editor-common/types").Command;
+            hasAnyUnResolvedAnnotationInPage: (state: EditorState) => boolean;
+        };
+    }> | undefined;
+    annotationSelectionType: AnnotationSelectionType;
+    bookmark?: SelectionBookmark | undefined;
+}) => void;

package/dist/types/ui/CommentButton/utils.d.ts

@@ -0,0 +1,52 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { AnnotationPlugin } from '../../annotationPluginType';
+import { AnnotationSelectionType, type AnnotationProviders } from '../../types';
+export declare const isButtonDisabled: ({ state, api, }: {
+    state: EditorState | null;
+    api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"annotation", {
+        pluginConfiguration: AnnotationProviders | undefined;
+        sharedState: import("../..").InlineCommentPluginState | undefined;
+        dependencies: import("../../annotationPluginType").AnnotationPluginDependencies;
+        actions: {
+            stripNonExistingAnnotations: (slice: import("prosemirror-model").Slice, state: EditorState) => boolean | undefined;
+            setInlineCommentDraftState: (drafting: boolean, inputMethod: import("../../types").InlineCommentInputMethod, targetType?: import("../../types").TargetType | undefined, targetNodeId?: string | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => import("@atlaskit/editor-common/types").Command;
+            showCommentForBlockNode: (node: import("prosemirror-model").Node | null, viewMethod?: import("@atlaskit/editor-common/analytics").VIEW_METHOD | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => import("@atlaskit/editor-common/types").Command;
+            hasAnyUnResolvedAnnotationInPage: (state: EditorState) => boolean;
+        };
+    }> | undefined;
+}) => boolean;
+export declare const shouldShowCommentButton: ({ state, isVisible, annotationSelectionType, }: {
+    state: EditorState | null;
+    isVisible?: boolean | undefined;
+    annotationSelectionType: AnnotationSelectionType;
+}) => boolean;
+export declare const fireOnClickAnalyticsEvent: ({ api, }: {
+    api: ExtractInjectionAPI<AnnotationPlugin>;
+}) => void;
+export declare const fireAnnotationErrorAnalyticsEvent: ({ api, errorReason, }: {
+    api: ExtractInjectionAPI<AnnotationPlugin>;
+    errorReason: string;
+}) => void;
+export declare const fireCommentButtonViewedAnalyticsEvent: ({ api, isNonTextInlineNodeInludedInComment, annotationSelectionType, }: {
+    api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"annotation", {
+        pluginConfiguration: AnnotationProviders | undefined;
+        sharedState: import("../..").InlineCommentPluginState | undefined;
+        dependencies: import("../../annotationPluginType").AnnotationPluginDependencies;
+        actions: {
+            stripNonExistingAnnotations: (slice: import("prosemirror-model").Slice, state: EditorState) => boolean | undefined;
+            setInlineCommentDraftState: (drafting: boolean, inputMethod: import("../../types").InlineCommentInputMethod, targetType?: import("../../types").TargetType | undefined, targetNodeId?: string | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => import("@atlaskit/editor-common/types").Command;
+            showCommentForBlockNode: (node: import("prosemirror-model").Node | null, viewMethod?: import("@atlaskit/editor-common/analytics").VIEW_METHOD | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => import("@atlaskit/editor-common/types").Command;
+            hasAnyUnResolvedAnnotationInPage: (state: EditorState) => boolean;
+        };
+    }> | undefined;
+    isNonTextInlineNodeInludedInComment: boolean;
+    annotationSelectionType: AnnotationSelectionType;
+}) => void;
+export declare const startCommentExperience: ({ annotationProviders, api, state, dispatch, }: {
+    annotationProviders: AnnotationProviders;
+    api: ExtractInjectionAPI<AnnotationPlugin>;
+    state: EditorState;
+    dispatch: EditorView['dispatch'];
+}) => boolean;

package/dist/types/ui/toolbar-components.d.ts

@@ -0,0 +1,5 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
+import type { AnnotationPlugin } from '../annotationPluginType';
+import { type AnnotationProviders } from '../types';
+export declare const getToolbarComponents: (api?: ExtractInjectionAPI<AnnotationPlugin>, annotationProviders?: AnnotationProviders) => RegisterComponent[];

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

@@ -4,6 +4,7 @@ import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { EditorViewModeEffectsPlugin } from '@atlaskit/editor-plugin-editor-viewmode-effects';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { Slice } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { showInlineCommentForBlockNode } from './editor-commands';
@@ -18,7 +19,8 @@ export type AnnotationPluginDependencies = [
     OptionalPlugin<EditorViewModeEffectsPlugin>,
     OptionalPlugin<EditorViewModePlugin>,
     OptionalPlugin<FeatureFlagsPlugin>,
-    OptionalPlugin<ConnectivityPlugin>
+    OptionalPlugin<ConnectivityPlugin>,
+    OptionalPlugin<ToolbarPlugin>
 ];
 export type AnnotationPluginOptions = AnnotationProviders;
 export type AnnotationPlugin = NextEditorPlugin<'annotation', {

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { AnnotationPlugin } from '../../annotationPluginType';
+import { type AnnotationProviders } from '../../types';
+type CommentButtonProps = {
+    api?: ExtractInjectionAPI<AnnotationPlugin>;
+    annotationProviders?: AnnotationProviders;
+};
+export declare const CommentButton: ({ api, annotationProviders }: CommentButtonProps) => React.JSX.Element | null;
+export {};

package/dist/types-ts4.5/ui/CommentButton/hooks.d.ts

@@ -0,0 +1,22 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type EditorState, type SelectionBookmark } from '@atlaskit/editor-prosemirror/state';
+import type { AnnotationPlugin } from '../../annotationPluginType';
+import type { AnnotationSelectionType } from '../../types';
+import { type AnnotationProviders } from '../../types';
+export declare const useCommentButtonMount: ({ state, annotationProviders, api, annotationSelectionType, bookmark, }: {
+    state: EditorState | null;
+    annotationProviders?: AnnotationProviders | undefined;
+    api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"annotation", {
+        pluginConfiguration: AnnotationProviders | undefined;
+        sharedState: import("../..").InlineCommentPluginState | undefined;
+        dependencies: import("../../annotationPluginType").AnnotationPluginDependencies;
+        actions: {
+            stripNonExistingAnnotations: (slice: import("prosemirror-model").Slice, state: EditorState) => boolean | undefined;
+            setInlineCommentDraftState: (drafting: boolean, inputMethod: import("../../types").InlineCommentInputMethod, targetType?: import("../../types").TargetType | undefined, targetNodeId?: string | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => import("@atlaskit/editor-common/types").Command;
+            showCommentForBlockNode: (node: import("prosemirror-model").Node | null, viewMethod?: import("@atlaskit/editor-common/analytics").VIEW_METHOD | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => import("@atlaskit/editor-common/types").Command;
+            hasAnyUnResolvedAnnotationInPage: (state: EditorState) => boolean;
+        };
+    }> | undefined;
+    annotationSelectionType: AnnotationSelectionType;
+    bookmark?: SelectionBookmark | undefined;
+}) => void;

package/dist/types-ts4.5/ui/CommentButton/utils.d.ts

@@ -0,0 +1,52 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { AnnotationPlugin } from '../../annotationPluginType';
+import { AnnotationSelectionType, type AnnotationProviders } from '../../types';
+export declare const isButtonDisabled: ({ state, api, }: {
+    state: EditorState | null;
+    api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"annotation", {
+        pluginConfiguration: AnnotationProviders | undefined;
+        sharedState: import("../..").InlineCommentPluginState | undefined;
+        dependencies: import("../../annotationPluginType").AnnotationPluginDependencies;
+        actions: {
+            stripNonExistingAnnotations: (slice: import("prosemirror-model").Slice, state: EditorState) => boolean | undefined;
+            setInlineCommentDraftState: (drafting: boolean, inputMethod: import("../../types").InlineCommentInputMethod, targetType?: import("../../types").TargetType | undefined, targetNodeId?: string | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => import("@atlaskit/editor-common/types").Command;
+            showCommentForBlockNode: (node: import("prosemirror-model").Node | null, viewMethod?: import("@atlaskit/editor-common/analytics").VIEW_METHOD | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => import("@atlaskit/editor-common/types").Command;
+            hasAnyUnResolvedAnnotationInPage: (state: EditorState) => boolean;
+        };
+    }> | undefined;
+}) => boolean;
+export declare const shouldShowCommentButton: ({ state, isVisible, annotationSelectionType, }: {
+    state: EditorState | null;
+    isVisible?: boolean | undefined;
+    annotationSelectionType: AnnotationSelectionType;
+}) => boolean;
+export declare const fireOnClickAnalyticsEvent: ({ api, }: {
+    api: ExtractInjectionAPI<AnnotationPlugin>;
+}) => void;
+export declare const fireAnnotationErrorAnalyticsEvent: ({ api, errorReason, }: {
+    api: ExtractInjectionAPI<AnnotationPlugin>;
+    errorReason: string;
+}) => void;
+export declare const fireCommentButtonViewedAnalyticsEvent: ({ api, isNonTextInlineNodeInludedInComment, annotationSelectionType, }: {
+    api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"annotation", {
+        pluginConfiguration: AnnotationProviders | undefined;
+        sharedState: import("../..").InlineCommentPluginState | undefined;
+        dependencies: import("../../annotationPluginType").AnnotationPluginDependencies;
+        actions: {
+            stripNonExistingAnnotations: (slice: import("prosemirror-model").Slice, state: EditorState) => boolean | undefined;
+            setInlineCommentDraftState: (drafting: boolean, inputMethod: import("../../types").InlineCommentInputMethod, targetType?: import("../../types").TargetType | undefined, targetNodeId?: string | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => import("@atlaskit/editor-common/types").Command;
+            showCommentForBlockNode: (node: import("prosemirror-model").Node | null, viewMethod?: import("@atlaskit/editor-common/analytics").VIEW_METHOD | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => import("@atlaskit/editor-common/types").Command;
+            hasAnyUnResolvedAnnotationInPage: (state: EditorState) => boolean;
+        };
+    }> | undefined;
+    isNonTextInlineNodeInludedInComment: boolean;
+    annotationSelectionType: AnnotationSelectionType;
+}) => void;
+export declare const startCommentExperience: ({ annotationProviders, api, state, dispatch, }: {
+    annotationProviders: AnnotationProviders;
+    api: ExtractInjectionAPI<AnnotationPlugin>;
+    state: EditorState;
+    dispatch: EditorView['dispatch'];
+}) => boolean;

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

@@ -0,0 +1,5 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
+import type { AnnotationPlugin } from '../annotationPluginType';
+import { type AnnotationProviders } from '../types';
+export declare const getToolbarComponents: (api?: ExtractInjectionAPI<AnnotationPlugin>, annotationProviders?: AnnotationProviders) => RegisterComponent[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-annotation",
-	"version": "3.1.4",
+	"version": "3.2.0",
 	"description": "Annotation plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,15 +36,19 @@
 		"@atlaskit/editor-plugin-connectivity": "^3.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode-effects": "^3.0.0",
 		"@atlaskit/editor-plugin-feature-flags": "^2.0.0",
+		"@atlaskit/editor-plugin-toolbar": "^0.0.6",
 		"@atlaskit/editor-prosemirror": "7.0.0",
+		"@atlaskit/editor-toolbar": "^0.0.10",
+		"@atlaskit/editor-toolbar-model": "^0.0.4",
 		"@atlaskit/icon": "^27.9.0",
 		"@atlaskit/onboarding": "^14.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^9.23.0",
-		"@babel/runtime": "^7.0.0"
+		"@atlaskit/tmp-editor-statsig": "^9.25.0",
+		"@babel/runtime": "^7.0.0",
+		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.16.0",
+		"@atlaskit/editor-common": "^107.18.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
@@ -54,7 +58,6 @@
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/visual-regression": "workspace:^",
 		"@testing-library/react": "^13.4.0",
-		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0"
 	},
 	"techstack": {