@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
67 lines • 4.24 kB
JavaScript
import React from 'react';
import { INPUT_METHOD, VIEW_METHOD } from '@atlaskit/editor-common/analytics';
import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
import { commentMessages as messages } from '@atlaskit/editor-common/media';
import { annotationMessages } from '@atlaskit/editor-common/messages';
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
import CommentIcon from '@atlaskit/icon/core/comment';
import { fg } from '@atlaskit/platform-feature-flags';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
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;
if (fg('confluence_fe_create_inline_comment_exp_coverage_2')) {
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() {
if (fg('confluence_frontend_preload_inline_comment_editor')) {
onCommentButtonMount && onCommentButtonMount();
}
}
};
};