@atlaskit/editor-plugin-annotation/dist/esm/ui/CommentButton/CommentButton.js

Annotation plugin for @atlaskit/editor-core

import React from 'react';
import { useIntl } from 'react-intl';
import { ToolTipContent, addInlineComment } from '@atlaskit/editor-common/keymaps';
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 _annotationProviders$;
  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 annotationSelectionType = editorView !== null && editorView !== void 0 && editorView.state ? isSelectionValid(editorView.state) : AnnotationSelectionType.INVALID;
  var _ref2 = (_annotationProviders$ = annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment) !== null && _annotationProviders$ !== void 0 ? _annotationProviders$ : {},
    getCanAddComments = _ref2.getCanAddComments,
    contentType = _ref2.contentType;
  useCommentButtonMount({
    state: editorView === null || editorView === void 0 ? void 0 : editorView.state,
    annotationProviders: annotationProviders,
    api: api,
    annotationSelectionType: annotationSelectionType,
    bookmark: bookmark
  });
  var intl = useIntl();
  var onClick = function onClick() {
    if (!api || !annotationProviders || !(editorView !== null && editorView !== void 0 && editorView.state) || !(editorView !== null && editorView !== void 0 && editorView.dispatch)) {
      return;
    }
    fireOnClickAnalyticsEvent({
      api: api
    });
    startCommentExperience({
      annotationProviders: annotationProviders,
      api: api,
      state: editorView.state,
      dispatch: editorView.dispatch
    });
  };
  if (!shouldShowCommentButton({
    state: editorView === null || editorView === void 0 ? void 0 : editorView.state,
    isVisible: isVisible,
    annotationSelectionType: annotationSelectionType
  })) {
    return null;
  }
  var canAddComments = getCanAddComments ? getCanAddComments() : true;
  var commentMessage = intl.formatMessage(annotationMessages.createComment);
  var commentDisabledMessage = intl.formatMessage(fg('editor_inline_comments_on_inline_nodes') ? annotationMessages.createCommentDisabled : annotationMessages.createCommentInvalid);
  var noPermissionToAddCommentMessage = intl.formatMessage(annotationMessages.noPermissionToAddComment, {
    contentType: contentType
  });
  var isDisabled = isButtonDisabled({
    state: editorView === null || editorView === void 0 ? void 0 : editorView.state,
    api: api,
    canAddComments: canAddComments
  });
  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
    content: isDisabled ? !canAddComments ? noPermissionToAddCommentMessage : commentDisabledMessage : /*#__PURE__*/React.createElement(ToolTipContent, {
      description: commentMessage,
      keymap: addInlineComment
    })
  }, /*#__PURE__*/React.createElement(ToolbarButton, {
    iconBefore: /*#__PURE__*/React.createElement(NewCommentIcon, {
      label: "",
      size: "small"
    }),
    onClick: onClick,
    testId: AnnotationTestIds.floatingToolbarCreateButton,
    isDisabled: isDisabled
  }, commentMessage));
};