@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 { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { ToolTipContent, addInlineComment } from '@atlaskit/editor-common/keymaps';
import { annotationMessages } from '@atlaskit/editor-common/messages';
import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
import { ToolbarButton, CommentIcon as NewCommentIcon, ToolbarTooltip } from '@atlaskit/editor-toolbar';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
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 _useSharedPluginState = useSharedPluginStateWithSelector(api, ['annotation'], function (states) {
      var _states$annotationSta, _states$annotationSta2;
      return {
        isVisible: (_states$annotationSta = states.annotationState) === null || _states$annotationSta === void 0 ? void 0 : _states$annotationSta.isVisible,
        bookmark: (_states$annotationSta2 = states.annotationState) === null || _states$annotationSta2 === void 0 ? void 0 : _states$annotationSta2.bookmark
      };
    }),
    isVisible = _useSharedPluginState.isVisible,
    bookmark = _useSharedPluginState.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 _isButtonDisabled = isButtonDisabled({
      state: editorView === null || editorView === void 0 ? void 0 : editorView.state,
      api: api,
      canAddComments: canAddComments
    }),
    isDisabled = _isButtonDisabled.isDisabled,
    isAnnotationSelectionInvalid = _isButtonDisabled.isAnnotationSelectionInvalid;
  var tooltipContentWhenDisabled = function tooltipContentWhenDisabled() {
    if (!canAddComments) {
      return noPermissionToAddCommentMessage;
    } else if (isAnnotationSelectionInvalid) {
      return commentDisabledMessage;
    } else {
      // i.e. isOffline. No tooltip message needed.
      return expValEquals('confluence_fe_disable_comment_if_offline_fix', 'isEnabled', true) ? undefined : commentDisabledMessage;
    }
  };
  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
    content: isDisabled ? tooltipContentWhenDisabled() : /*#__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));
};