@atlaskit/editor-plugin-status
Version:
Status plugin for @atlaskit/editor-core
154 lines • 7.33 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 var statusPlugin = function statusPlugin(_ref) {
var _api$analytics, _api$analytics2;
var options = _ref.config,
api = _ref.api;
return {
name: 'status',
nodes: function nodes() {
return [{
name: 'status',
node: status
}];
},
pmPlugins: function pmPlugins() {
return [{
name: 'status',
plugin: function plugin(pmPluginFactoryParams) {
return createStatusPlugin(pmPluginFactoryParams, options);
}
}, {
name: 'statusKeymap',
plugin: keymapPlugin
}];
},
actions: {
commitStatusPicker: commitStatusPicker,
updateStatus: updateStatusWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
},
commands: {
removeStatus: removeStatus,
insertStatus: insertStatus(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
},
getSharedState: function getSharedState(state) {
if (!state) {
return undefined;
}
var pluginState = pluginKey.getState(state);
return pluginState ? {
isNew: pluginState.isNew,
showStatusPickerAt: pluginState.showStatusPickerAt,
focusStatusInput: pluginState.focusStatusInput
} : undefined;
},
pluginsOptions: {
quickInsert: function quickInsert(_ref2) {
var formatMessage = _ref2.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: function icon() {
return /*#__PURE__*/React.createElement(IconStatus, null);
},
action: function action(_insert, state) {
var _insertStatus, _api$analytics3;
return (_insertStatus = insertStatus(api === null || api === 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: function floatingToolbar(state, intl) {
var isViewMode = function isViewMode() {
var _api$editorViewMode;
return (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
};
if (!isViewMode()) {
return undefined;
}
return {
title: 'Status floating toolbar',
nodeType: state.schema.nodes.status,
onPositionCalculated: calculateToolbarPositionAboveSelection('Status floating toolbar'),
items: function items(node) {
var _api$annotation;
var annotationState = api === null || api === void 0 || (_api$annotation = api.annotation) === null || _api$annotation === void 0 ? void 0 : _api$annotation.sharedState.currentState();
var hasActiveMark = node.marks.some(function (mark) {
return mark.type.name === 'annotation' && (annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations[mark.attrs.id]) === false;
});
var showAnnotation = annotationState && isViewMode() && annotationState.isVisible && !annotationState.bookmark && !annotationState.mouseData.isSelecting && !hasActiveMark;
var onCommentClick = function onCommentClick(stateFromClickEvent, dispatch) {
var _api$analytics4;
if (!(api !== null && api !== void 0 && api.annotation)) {
return true;
}
var command = api.annotation.actions.setInlineCommentDraftState(true, INPUT_METHOD.TOOLBAR);
api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 || (_api$analytics4 = _api$analytics4.actions) === null || _api$analytics4 === void 0 || _api$analytics4.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);
};
var createCommentMessage = intl.formatMessage(annotationMessages.createComment);
var commentItems = showAnnotation ? [{
type: 'button',
title: createCommentMessage,
onClick: onCommentClick,
showTitle: true,
tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {
description: createCommentMessage,
keymap: addInlineComment
}),
icon: CommentIcon,
supportsViewMode: true
}] : [];
return [].concat(commentItems);
}
};
}
},
contentComponent: function contentComponent(_ref3) {
var editorView = _ref3.editorView,
popupsMountPoint = _ref3.popupsMountPoint,
popupsBoundariesElement = _ref3.popupsBoundariesElement,
popupsScrollableElement = _ref3.popupsScrollableElement;
if (!editorView) {
return null;
}
var domAtPos = editorView.domAtPos.bind(editorView);
return /*#__PURE__*/React.createElement(ContentComponent, {
domAtPos: domAtPos,
api: api,
editorView: editorView,
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement
});
}
};
};