@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 _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 _annotationProviders$;
  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 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(_messages.annotationMessages.createComment);
  var commentDisabledMessage = intl.formatMessage((0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? _messages.annotationMessages.createCommentDisabled : _messages.annotationMessages.createCommentInvalid);
  var noPermissionToAddCommentMessage = intl.formatMessage(_messages.annotationMessages.noPermissionToAddComment, {
    contentType: contentType
  });
  var isDisabled = (0, _utils2.isButtonDisabled)({
    state: editorView === null || editorView === void 0 ? void 0 : editorView.state,
    api: api,
    canAddComments: canAddComments
  });
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
    content: isDisabled ? !canAddComments ? noPermissionToAddCommentMessage : commentDisabledMessage : /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
      description: commentMessage,
      keymap: _keymaps.addInlineComment
    })
  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
    iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.CommentIcon, {
      label: "",
      size: "small"
    }),
    onClick: onClick,
    testId: _types.AnnotationTestIds.floatingToolbarCreateButton,
    isDisabled: isDisabled
  }, commentMessage));
};