@atlaskit/editor-plugin-annotation
Version:
Annotation plugin for @atlaskit/editor-core
131 lines (130 loc) • 6.14 kB
JavaScript
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, MODE } from '@atlaskit/editor-common/analytics';
import { currentMediaNodeWithPos } from '@atlaskit/editor-common/media-single';
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
import { setInlineCommentDraftState } from '../../editor-commands';
import { inlineCommentPluginKey, isSelectionValid } from '../../pm-plugins/utils';
import { AnnotationSelectionType } from '../../types';
export const isButtonDisabled = ({
state,
api,
canAddComments
}) => {
var _api$connectivity, _api$connectivity$sha, _api$connectivity$sha2;
const annotationSelectionType = state ? isSelectionValid(state) : AnnotationSelectionType.INVALID;
return !canAddComments || annotationSelectionType === AnnotationSelectionType.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);
};
export const shouldShowCommentButton = ({
state,
isVisible,
annotationSelectionType
}) => {
const isMediaSelected = state ? currentMediaNodeWithPos(state) : false;
let isDrafting = false;
if (state) {
var _inlineCommentPluginK;
isDrafting = ((_inlineCommentPluginK = inlineCommentPluginKey.getState(state)) === null || _inlineCommentPluginK === void 0 ? void 0 : _inlineCommentPluginK.isDrafting) || false;
}
// comments on media can only be added via media floating toolbar
if (isDrafting || isMediaSelected || annotationSelectionType === AnnotationSelectionType.INVALID || !isVisible) {
return false;
}
return true;
};
export const fireOnClickAnalyticsEvent = ({
api
}) => {
var _api$analytics;
(_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent({
action: ACTION.CLICKED,
actionSubject: ACTION_SUBJECT.BUTTON,
actionSubjectId: ACTION_SUBJECT_ID.CREATE_INLINE_COMMENT_FROM_HIGHLIGHT_ACTIONS_MENU,
eventType: EVENT_TYPE.UI,
attributes: {
source: 'highlightActionsMenu',
pageMode: 'edit'
}
});
};
const fireAnnotationErrorAnalyticsEvent = ({
api,
errorReason
}) => {
var _api$analytics2, _api$analytics2$actio;
(_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : (_api$analytics2$actio = _api$analytics2.actions) === null || _api$analytics2$actio === void 0 ? void 0 : _api$analytics2$actio.fireAnalyticsEvent({
action: ACTION.ERROR,
actionSubject: ACTION_SUBJECT.ANNOTATION,
actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
eventType: EVENT_TYPE.OPERATIONAL,
attributes: {
errorReason
}
});
};
export const fireCommentButtonViewedAnalyticsEvent = ({
api,
isNonTextInlineNodeInludedInComment,
annotationSelectionType
}) => {
var _api$analytics3;
api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent({
action: ACTION.VIEWED,
actionSubject: ACTION_SUBJECT.BUTTON,
actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
eventType: EVENT_TYPE.UI,
attributes: {
isNonTextInlineNodeInludedInComment,
isDisabled: annotationSelectionType === AnnotationSelectionType.DISABLED,
inputMethod: INPUT_METHOD.FLOATING_TB,
mode: MODE.EDITOR
}
});
};
export const startCommentExperience = ({
annotationProviders,
api,
state,
dispatch
}) => {
const annotationManager = annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.annotationManager;
if (annotationManager) {
annotationManager.checkPreemptiveGate().then(canStartDraft => {
if (canStartDraft) {
var _annotationProviders$, _annotationProviders$2;
(_annotationProviders$ = annotationProviders.createCommentExperience) === null || _annotationProviders$ === void 0 ? void 0 : _annotationProviders$.start({
attributes: {
pageClass: 'editor',
commentType: 'inline',
entryPoint: 'highlightActions'
}
});
(_annotationProviders$2 = annotationProviders.createCommentExperience) === null || _annotationProviders$2 === void 0 ? void 0 : _annotationProviders$2.initExperience.start();
const result = annotationManager.startDraft();
if (!result.success) {
// Fire an analytics event to indicate that the user has clicked the button
// but the action was not completed, the result should contain a reason.
fireAnnotationErrorAnalyticsEvent({
api,
errorReason: `toolbar-start-draft-failed/${result.reason}`
});
}
}
}).catch(() => {
fireAnnotationErrorAnalyticsEvent({
api,
errorReason: `toolbar-start-draft-preemptive-gate-error`
});
});
return true;
} else {
var _annotationProviders$3, _annotationProviders$4, _api$analytics4;
annotationProviders === null || annotationProviders === void 0 ? void 0 : (_annotationProviders$3 = annotationProviders.createCommentExperience) === null || _annotationProviders$3 === void 0 ? void 0 : _annotationProviders$3.start({
attributes: {
pageClass: 'editor',
commentType: 'inline',
entryPoint: 'highlightActions'
}
});
annotationProviders === null || annotationProviders === void 0 ? void 0 : (_annotationProviders$4 = annotationProviders.createCommentExperience) === null || _annotationProviders$4 === void 0 ? void 0 : _annotationProviders$4.initExperience.start();
return setInlineCommentDraftState(api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, undefined, api)(true)(state, dispatch);
}
};