@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
66 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 const commentButton = (intl, state, api, onCommentButtonMount, createCommentExperience) => {
var _getSelectedMediaSing, _api$annotation, _api$annotation$share, _api$connectivity, _api$connectivity$sha, _api$connectivity$sha2;
const selectMediaNode = (_getSelectedMediaSing = getSelectedMediaSingle(state)) === null || _getSelectedMediaSing === void 0 ? void 0 : _getSelectedMediaSing.node.firstChild;
let hasActiveComments = false;
const annotations = api === null || api === void 0 ? void 0 : (_api$annotation = api.annotation) === null || _api$annotation === void 0 ? void 0 : (_api$annotation$share = _api$annotation.sharedState.currentState()) === null || _api$annotation$share === void 0 ? void 0 : _api$annotation$share.annotations;
if (selectMediaNode && annotations) {
hasActiveComments = selectMediaNode.marks.some(mark => mark.type.name === 'annotation' && !annotations[mark.attrs.id]);
}
const title = intl.formatMessage(hasActiveComments ? messages.viewCommentsOnMedia : messages.addCommentOnMedia);
const buttonLabel = intl.formatMessage(annotationMessages.createComment);
const onClickHandler = (state, dispatch) => {
if (api !== null && api !== void 0 && api.annotation && selectMediaNode) {
const {
showCommentForBlockNode,
setInlineCommentDraftState
} = api.annotation.actions;
const 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 ? void 0 : createCommentExperience.start({
attributes: {
pageClass: 'editor',
commentType: 'block',
blockType: 'media',
entryPoint: 'highlightActionsSimple'
}
});
createCommentExperience === null || createCommentExperience === void 0 ? 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 ? void 0 : (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : (_api$connectivity$sha = _api$connectivity.sharedState) === null || _api$connectivity$sha === void 0 ? void 0 : (_api$connectivity$sha2 = _api$connectivity$sha.currentState()) === null || _api$connectivity$sha2 === void 0 ? void 0 : _api$connectivity$sha2.mode),
onMount: () => {
if (fg('confluence_frontend_preload_inline_comment_editor')) {
onCommentButtonMount && onCommentButtonMount();
}
}
};
};