@atlaskit/editor-plugin-annotation
Version:
Annotation plugin for @atlaskit/editor-core
104 lines • 4.45 kB
JavaScript
import React from 'react';
import { useIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { ToolTipContent, addInlineComment } from '@atlaskit/editor-common/keymaps';
import { annotationMessages } from '@atlaskit/editor-common/messages';
import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
import { ToolbarButton, CommentIcon as NewCommentIcon, ToolbarTooltip } from '@atlaskit/editor-toolbar';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
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,
bookmark
} = useSharedPluginStateWithSelector(api, ['annotation'], 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
};
});
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,
isAnnotationSelectionInvalid
} = isButtonDisabled({
state: editorView === null || editorView === void 0 ? void 0 : editorView.state,
api,
canAddComments
});
const tooltipContentWhenDisabled = () => {
if (!canAddComments) {
return noPermissionToAddCommentMessage;
} else if (isAnnotationSelectionInvalid) {
return commentDisabledMessage;
} else {
// i.e. isOffline. No tooltip message needed.
return expValEquals('confluence_fe_disable_comment_if_offline_fix', 'isEnabled', true) ? undefined : commentDisabledMessage;
}
};
return /*#__PURE__*/React.createElement(ToolbarTooltip, {
content: isDisabled ? tooltipContentWhenDisabled() : /*#__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));
};