@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 _hooks = require("@atlaskit/editor-common/hooks");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _messages = require("@atlaskit/editor-common/messages");
var _toolbar = require("@atlaskit/editor-common/toolbar");
var _editorToolbar = require("@atlaskit/editor-toolbar");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _utils = require("../../pm-plugins/utils");
var _types = require("../../types");
var _hooks2 = 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, _hooks.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, _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, _hooks2.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 _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 (0, _expValEquals.expValEquals)('confluence_fe_disable_comment_if_offline_fix', 'isEnabled', true) ? undefined : commentDisabledMessage;
    }
  };
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
    content: isDisabled ? tooltipContentWhenDisabled() : /*#__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));
};