@atlaskit/editor-plugin-media/dist/esm/ui/toolbar/comments.js

Media plugin for @atlaskit/editor-core

import React from 'react';
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics/types/enums';
import { VIEW_METHOD } from '@atlaskit/editor-common/analytics/types/inline-comment-events';
import { isOfflineMode } from '@atlaskit/editor-common/connectivity/isOfflineMode';
import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
import { commentMessages as messages } from '@atlaskit/editor-common/media/comments';
import { annotationMessages } from '@atlaskit/editor-common/messages/annotation';
import CommentIcon from '@atlaskit/icon/core/comment';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
import { getSelectedMediaSingle } from './utils';
export var commentButton = function commentButton(intl, state, api, onCommentButtonMount, createCommentExperience) {
  var _getSelectedMediaSing, _api$annotation, _api$connectivity;
  var selectMediaNode = (_getSelectedMediaSing = getSelectedMediaSingle(state)) === null || _getSelectedMediaSing === void 0 ? void 0 : _getSelectedMediaSing.node.firstChild;
  var hasActiveComments = false;
  var annotations = api === null || api === void 0 || (_api$annotation = api.annotation) === null || _api$annotation === void 0 || (_api$annotation = _api$annotation.sharedState.currentState()) === null || _api$annotation === void 0 ? void 0 : _api$annotation.annotations;
  if (selectMediaNode && annotations) {
    hasActiveComments = selectMediaNode.marks.some(function (mark) {
      return mark.type.name === 'annotation' && !annotations[mark.attrs.id];
    });
  }
  var title = intl.formatMessage(hasActiveComments ? messages.viewCommentsOnMedia : messages.addCommentOnMedia);
  var buttonLabel = intl.formatMessage(annotationMessages.createComment);
  var onClickHandler = function onClickHandler(state, dispatch) {
    if (api !== null && api !== void 0 && api.annotation && selectMediaNode) {
      var _api$annotation$actio = api.annotation.actions,
        showCommentForBlockNode = _api$annotation$actio.showCommentForBlockNode,
        setInlineCommentDraftState = _api$annotation$actio.setInlineCommentDraftState;
      var isOpeningMediaCommentFromToolbar = fg('confluence_frontend_media_scroll_fix') ? true : false;
      if (!showCommentForBlockNode(selectMediaNode, VIEW_METHOD.COMMENT_BUTTON, isOpeningMediaCommentFromToolbar)(state, dispatch)) {
        var _selectMediaNode$attr;
        createCommentExperience === null || createCommentExperience === void 0 || createCommentExperience.start({
          attributes: {
            pageClass: 'editor',
            commentType: 'block',
            blockType: 'media',
            entryPoint: 'highlightActionsSimple'
          }
        });
        createCommentExperience === null || createCommentExperience === void 0 || createCommentExperience.initExperience.start();
        setInlineCommentDraftState(true,
        // TODO: ED-26962 - might need to update to reflect it's from media floating toolbar
        INPUT_METHOD.FLOATING_TB, 'block', (_selectMediaNode$attr = selectMediaNode.attrs) === null || _selectMediaNode$attr === void 0 ? void 0 : _selectMediaNode$attr.id, isOpeningMediaCommentFromToolbar)(state, dispatch);
      }
    }
    return true;
  };
  return {
    type: 'button',
    testId: 'add-comment-media-button',
    icon: CommentIcon,
    title: editorExperiment('platform_editor_controls', 'control') ? title : buttonLabel,
    showTitle: editorExperiment('platform_editor_controls', 'control') ? undefined : true,
    onClick: onClickHandler,
    tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {
      description: title
    }),
    supportsViewMode: true,
    disabled: isOfflineMode(api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode),
    onMount: function onMount() {
      onCommentButtonMount && onCommentButtonMount();
      if (fg('cc_maui_annotations_on_extensions')) {
        var _api$connectivity2, _api$analytics;
        var payload = {
          eventType: EVENT_TYPE.SCREEN,
          name: 'inlineCommentToolbar',
          action: ACTION.VIEWED,
          actionSubject: ACTION_SUBJECT.INLINE_COMMENT_TOOLBAR,
          attributes: {
            commentTargetType: 'media',
            hasExistingComments: hasActiveComments,
            isCommentButtonEnabled: !isOfflineMode(api === null || api === void 0 || (_api$connectivity2 = api.connectivity) === null || _api$connectivity2 === void 0 || (_api$connectivity2 = _api$connectivity2.sharedState) === null || _api$connectivity2 === void 0 || (_api$connectivity2 = _api$connectivity2.currentState()) === null || _api$connectivity2 === void 0 ? void 0 : _api$connectivity2.mode)
          }
        };
        api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent(payload);
      }
    }
  };
};