@atlaskit/editor-plugin-status
Version:
Status plugin for @atlaskit/editor-core
151 lines • 6.94 kB
JavaScript
import React from 'react';
import { status } from '@atlaskit/adf-schema';
import { ACTION_SUBJECT_ID, ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { addInlineComment, ToolTipContent } from '@atlaskit/editor-common/keymaps';
import { annotationMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
import { IconStatus } from '@atlaskit/editor-common/quick-insert';
import { calculateToolbarPositionAboveSelection } from '@atlaskit/editor-common/utils';
import CommentIcon from '@atlaskit/icon/core/comment';
import { commitStatusPicker, insertStatus, removeStatus, updateStatusWithAnalytics } from './pm-plugins/actions';
import { keymapPlugin } from './pm-plugins/keymap';
import createStatusPlugin from './pm-plugins/plugin';
import { pluginKey } from './pm-plugins/plugin-key';
import { ContentComponent } from './ui/ContentComponent';
export const statusPlugin = ({
config: options,
api
}) => {
var _api$analytics, _api$analytics2;
return {
name: 'status',
nodes() {
return [{
name: 'status',
node: status
}];
},
pmPlugins() {
return [{
name: 'status',
plugin: pmPluginFactoryParams => createStatusPlugin(pmPluginFactoryParams, options)
}, {
name: 'statusKeymap',
plugin: keymapPlugin
}];
},
actions: {
commitStatusPicker,
updateStatus: updateStatusWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
},
commands: {
removeStatus,
insertStatus: insertStatus(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
},
getSharedState(state) {
if (!state) {
return undefined;
}
const pluginState = pluginKey.getState(state);
return pluginState ? {
isNew: pluginState.isNew,
showStatusPickerAt: pluginState.showStatusPickerAt,
focusStatusInput: pluginState.focusStatusInput
} : undefined;
},
pluginsOptions: {
quickInsert: ({
formatMessage
}) => {
if ((options === null || options === void 0 ? void 0 : options.menuDisabled) === true) {
return [];
}
return [{
id: 'status',
title: formatMessage(messages.status),
description: formatMessage(messages.statusDescription),
priority: 700,
keywords: ['lozenge'],
icon: () => /*#__PURE__*/React.createElement(IconStatus, null),
action(_insert, state) {
var _insertStatus, _api$analytics3;
return (_insertStatus = insertStatus(api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions)(INPUT_METHOD.QUICK_INSERT)({
tr: state.tr
})) !== null && _insertStatus !== void 0 ? _insertStatus : state.tr;
}
}];
},
floatingToolbar(state, intl) {
const isViewMode = () => {
var _api$editorViewMode, _api$editorViewMode$s;
return (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view';
};
if (!isViewMode()) {
return undefined;
}
return {
title: 'Status floating toolbar',
nodeType: state.schema.nodes.status,
onPositionCalculated: calculateToolbarPositionAboveSelection('Status floating toolbar'),
items: node => {
var _api$annotation;
const annotationState = api === null || api === void 0 ? void 0 : (_api$annotation = api.annotation) === null || _api$annotation === void 0 ? void 0 : _api$annotation.sharedState.currentState();
const hasActiveMark = node.marks.some(mark => mark.type.name === 'annotation' && (annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations[mark.attrs.id]) === false);
const showAnnotation = annotationState && isViewMode() && annotationState.isVisible && !annotationState.bookmark && !annotationState.mouseData.isSelecting && !hasActiveMark;
const onCommentClick = (stateFromClickEvent, dispatch) => {
var _api$analytics4, _api$analytics4$actio;
if (!(api !== null && api !== void 0 && api.annotation)) {
return true;
}
const command = api.annotation.actions.setInlineCommentDraftState(true, INPUT_METHOD.TOOLBAR);
api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : (_api$analytics4$actio = _api$analytics4.actions) === null || _api$analytics4$actio === void 0 ? void 0 : _api$analytics4$actio.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',
sourceNode: 'status'
}
});
return command(stateFromClickEvent, dispatch);
};
const createCommentMessage = intl.formatMessage(annotationMessages.createComment);
const commentItems = showAnnotation ? [{
type: 'button',
title: createCommentMessage,
onClick: onCommentClick,
showTitle: true,
tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {
description: createCommentMessage,
keymap: addInlineComment
}),
icon: CommentIcon,
supportsViewMode: true
}] : [];
return [...commentItems];
}
};
}
},
contentComponent({
editorView,
popupsMountPoint,
popupsBoundariesElement,
popupsScrollableElement
}) {
if (!editorView) {
return null;
}
const domAtPos = editorView.domAtPos.bind(editorView);
return /*#__PURE__*/React.createElement(ContentComponent, {
domAtPos: domAtPos,
api: api,
editorView: editorView,
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement
});
}
};
};