@atlaskit/editor-plugin-annotation
Version:
Annotation plugin for @atlaskit/editor-core
82 lines • 3.64 kB
JavaScript
import React from 'react';
import { useIntl } from 'react-intl';
import { ToolTipContent, addInlineComment } from '@atlaskit/editor-common/keymaps';
import { annotationMessages } from '@atlaskit/editor-common/messages';
import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
import { ToolbarButton, CommentIcon as NewCommentIcon, ToolbarTooltip } from '@atlaskit/editor-toolbar';
import { fg } from '@atlaskit/platform-feature-flags';
import { isSelectionValid } from '../../pm-plugins/utils';
import { AnnotationSelectionType, AnnotationTestIds } from '../../types';
import { useCommentButtonMount } from './hooks';
import { fireOnClickAnalyticsEvent, isButtonDisabled, shouldShowCommentButton, startCommentExperience } from './utils';
export const CommentButton = ({
api,
annotationProviders
}) => {
var _annotationProviders$;
const isVisible = useSharedPluginStateSelector(api, 'annotation.isVisible');
const bookmark = useSharedPluginStateSelector(api, 'annotation.bookmark');
const {
editorView
} = useEditorToolbar();
const annotationSelectionType = editorView !== null && editorView !== void 0 && editorView.state ? isSelectionValid(editorView.state) : AnnotationSelectionType.INVALID;
const {
getCanAddComments,
contentType
} = (_annotationProviders$ = annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment) !== null && _annotationProviders$ !== void 0 ? _annotationProviders$ : {};
useCommentButtonMount({
state: editorView === null || editorView === void 0 ? void 0 : editorView.state,
annotationProviders,
api,
annotationSelectionType,
bookmark
});
const intl = useIntl();
const onClick = () => {
if (!api || !annotationProviders || !(editorView !== null && editorView !== void 0 && editorView.state) || !(editorView !== null && editorView !== void 0 && editorView.dispatch)) {
return;
}
fireOnClickAnalyticsEvent({
api
});
startCommentExperience({
annotationProviders,
api,
state: editorView.state,
dispatch: editorView.dispatch
});
};
if (!shouldShowCommentButton({
state: editorView === null || editorView === void 0 ? void 0 : editorView.state,
isVisible,
annotationSelectionType
})) {
return null;
}
const canAddComments = getCanAddComments ? getCanAddComments() : true;
const commentMessage = intl.formatMessage(annotationMessages.createComment);
const commentDisabledMessage = intl.formatMessage(fg('editor_inline_comments_on_inline_nodes') ? annotationMessages.createCommentDisabled : annotationMessages.createCommentInvalid);
const noPermissionToAddCommentMessage = intl.formatMessage(annotationMessages.noPermissionToAddComment, {
contentType
});
const isDisabled = isButtonDisabled({
state: editorView === null || editorView === void 0 ? void 0 : editorView.state,
api,
canAddComments
});
return /*#__PURE__*/React.createElement(ToolbarTooltip, {
content: isDisabled ? !canAddComments ? noPermissionToAddCommentMessage : commentDisabledMessage : /*#__PURE__*/React.createElement(ToolTipContent, {
description: commentMessage,
keymap: addInlineComment
})
}, /*#__PURE__*/React.createElement(ToolbarButton, {
iconBefore: /*#__PURE__*/React.createElement(NewCommentIcon, {
label: "",
size: "small"
}),
onClick: onClick,
testId: AnnotationTestIds.floatingToolbarCreateButton,
isDisabled: isDisabled
}, commentMessage));
};