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

Annotation plugin for @atlaskit/editor-core

"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 _reactIntl = require("react-intl");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _annotation = require("@atlaskit/editor-common/messages/annotation");
var _context = require("@atlaskit/editor-common/toolbar/context");
var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useSharedPluginStateWithSelector");
var _commentIcon = require("@atlaskit/editor-toolbar/comment-icon");
var _toolbarButton = require("@atlaskit/editor-toolbar/toolbar-button");
var _toolbarTooltip = require("@atlaskit/editor-toolbar/toolbar-tooltip");
var _fg = require("@atlaskit/platform-feature-flags/fg");
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 _annotationProviders$;
  var api = _ref.api,
    annotationProviders = _ref.annotationProviders;
  var _useSharedPluginState = (0, _useSharedPluginStateWithSelector.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 = (0, _context.useEditorToolbar)(),
    editorView = _useEditorToolbar.editorView;
  var annotationSelectionType = editorView !== null && editorView !== void 0 && editorView.state ? (0, _utils.isSelectionValid)(editorView.state) : _types.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;
  (0, _hooks.useCommentButtonMount)({
    state: editorView === null || editorView === void 0 ? void 0 : editorView.state,
    annotationProviders: annotationProviders,
    api: api,
    annotationSelectionType: annotationSelectionType,
    bookmark: bookmark
  });
  var intl = (0, _reactIntl.useIntl)();
  var onClick = function onClick() {
    if (!api || !annotationProviders || !(editorView !== null && editorView !== void 0 && editorView.state) || !(editorView !== null && editorView !== void 0 && editorView.dispatch)) {
      return;
    }
    (0, _utils2.fireOnClickAnalyticsEvent)({
      api: api
    });
    (0, _utils2.startCommentExperience)({
      annotationProviders: annotationProviders,
      api: api,
      state: editorView.state,
      dispatch: editorView.dispatch
    });
  };
  if (!(0, _utils2.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(_annotation.annotationMessages.createComment);
  var commentDisabledMessage = intl.formatMessage((0, _fg.fg)('editor_inline_comments_on_inline_nodes') ? _annotation.annotationMessages.createCommentDisabled : _annotation.annotationMessages.createCommentInvalid);
  var noPermissionToAddCommentMessage = intl.formatMessage(_annotation.annotationMessages.noPermissionToAddComment, {
    contentType: contentType
  });
  var _isButtonDisabled = (0, _utils2.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 undefined;
    }
  };
  return /*#__PURE__*/_react.default.createElement(_toolbarTooltip.ToolbarTooltip, {
    content: isDisabled ? tooltipContentWhenDisabled() : /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
      description: commentMessage,
      keymap: _keymaps.addInlineComment
    })
  }, /*#__PURE__*/_react.default.createElement(_toolbarButton.ToolbarButton, {
    iconBefore: /*#__PURE__*/_react.default.createElement(_commentIcon.CommentIcon, {
      label: "",
      size: "small"
    }),
    onClick: onClick,
    testId: _types.AnnotationTestIds.floatingToolbarCreateButton,
    isDisabled: isDisabled
  }, commentMessage));
};