@atlaskit/editor-plugin-status
Version:
Status plugin for @atlaskit/editor-core
161 lines (160 loc) • 7.69 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.statusPlugin = void 0;
var _react = _interopRequireDefault(require("react"));
var _adfSchema = require("@atlaskit/adf-schema");
var _analytics = require("@atlaskit/editor-common/analytics");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _messages = require("@atlaskit/editor-common/messages");
var _quickInsert = require("@atlaskit/editor-common/quick-insert");
var _utils = require("@atlaskit/editor-common/utils");
var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
var _actions = require("./pm-plugins/actions");
var _keymap = require("./pm-plugins/keymap");
var _plugin = _interopRequireDefault(require("./pm-plugins/plugin"));
var _pluginKey = require("./pm-plugins/plugin-key");
var _ContentComponent = require("./ui/ContentComponent");
var statusPlugin = exports.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: _adfSchema.status
}];
},
pmPlugins: function pmPlugins() {
return [{
name: 'status',
plugin: function plugin(pmPluginFactoryParams) {
return (0, _plugin.default)(pmPluginFactoryParams, options);
}
}, {
name: 'statusKeymap',
plugin: _keymap.keymapPlugin
}];
},
actions: {
commitStatusPicker: _actions.commitStatusPicker,
updateStatus: (0, _actions.updateStatusWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
},
commands: {
removeStatus: _actions.removeStatus,
insertStatus: (0, _actions.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.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.toolbarInsertBlockMessages.status),
description: formatMessage(_messages.toolbarInsertBlockMessages.statusDescription),
priority: 700,
keywords: ['lozenge'],
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconStatus, null);
},
action: function action(_insert, state) {
var _insertStatus, _api$analytics3;
return (_insertStatus = (0, _actions.insertStatus)(api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions)(_analytics.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: (0, _utils.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, _analytics.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: _analytics.ACTION.CLICKED,
actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.CREATE_INLINE_COMMENT_FROM_HIGHLIGHT_ACTIONS_MENU,
eventType: _analytics.EVENT_TYPE.UI,
attributes: {
source: 'highlightActionsMenu',
pageMode: 'edit',
sourceNode: 'status'
}
});
return command(stateFromClickEvent, dispatch);
};
var createCommentMessage = intl.formatMessage(_messages.annotationMessages.createComment);
var commentItems = showAnnotation ? [{
type: 'button',
title: createCommentMessage,
onClick: onCommentClick,
showTitle: true,
tooltipContent: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
description: createCommentMessage,
keymap: _keymaps.addInlineComment
}),
icon: _comment.default,
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.default.createElement(_ContentComponent.ContentComponent, {
domAtPos: domAtPos,
api: api,
editorView: editorView,
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement
});
}
};
};