@atlaskit/editor-plugin-annotation
Version:
Annotation plugin for @atlaskit/editor-core
232 lines (230 loc) • 11.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.annotationPlugin = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _react = _interopRequireDefault(require("react"));
var _coreUtils = require("@atlaskit/editor-common/core-utils");
var _hooks = require("@atlaskit/editor-common/hooks");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _editorCommands = require("./editor-commands");
var _annotationMark = require("./nodeviews/annotationMark");
var _inlineComment = require("./pm-plugins/inline-comment");
var _keymap = require("./pm-plugins/keymap");
var _toolbar = require("./pm-plugins/toolbar");
var _types = require("./pm-plugins/types");
var _utils = require("./pm-plugins/utils");
var _InlineCommentView = require("./ui/InlineCommentView");
var _toolbarComponents = require("./ui/toolbar-components");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var annotationPlugin = exports.annotationPlugin = function annotationPlugin(_ref) {
var _api$featureFlags, _api$analytics;
var annotationProviders = _ref.config,
api = _ref.api;
var featureFlags = api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState();
var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
/**
* Allows external editor UI, currently AI suggestions, to safely close an inline comment
* without bypassing the provider's unsaved-content guard.
*/
var requestCloseInlineComment = /*#__PURE__*/function () {
var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
var _api$core$actions$exe, requestClose, canClose, _t;
return _regenerator.default.wrap(function (_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.prev = 0;
requestClose = annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.requestClose;
if (requestClose) {
_context.next = 1;
break;
}
return _context.abrupt("return", true);
case 1:
_context.next = 2;
return requestClose();
case 2:
canClose = _context.sent;
if (canClose) {
_context.next = 3;
break;
}
return _context.abrupt("return", false);
case 3:
return _context.abrupt("return", (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(function (_ref3) {
var tr = _ref3.tr;
tr.setMeta(_utils.inlineCommentPluginKey, {
type: _types.ACTIONS.CLOSE_COMPONENT
});
return tr;
})) !== null && _api$core$actions$exe !== void 0 ? _api$core$actions$exe : false);
case 4:
_context.prev = 4;
_t = _context["catch"](0);
return _context.abrupt("return", false);
case 5:
case "end":
return _context.stop();
}
}, _callee, null, [[0, 4]]);
}));
return function requestCloseInlineComment() {
return _ref2.apply(this, arguments);
};
}();
if (isToolbarAIFCEnabled) {
var _api$toolbar;
api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)(api, annotationProviders));
}
return {
name: 'annotation',
marks: function marks() {
return [{
name: 'annotation',
mark: _annotationMark.annotationWithToDOMFix
}];
},
actions: {
hasAnyUnResolvedAnnotationInPage: _utils.hasAnyUnResolvedAnnotationInPage,
requestCloseInlineComment: requestCloseInlineComment,
stripNonExistingAnnotations: _utils.stripNonExistingAnnotations,
setInlineCommentDraftState: (0, _editorCommands.setInlineCommentDraftState)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.supportedBlockNodes),
showCommentForBlockNode: (0, _editorCommands.showInlineCommentForBlockNode)(annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.supportedBlockNodes),
setSelectedAnnotation: _editorCommands.setSelectedAnnotation,
setPendingSelectedAnnotation: _editorCommands.setPendingSelectedAnnotation
},
getSharedState: function getSharedState(editorState) {
if (!editorState) {
return undefined;
}
var pluginState = (0, _utils.getPluginState)(editorState) || undefined;
var clonedPluginState = Object.assign({}, pluginState);
clonedPluginState === null || clonedPluginState === void 0 || delete clonedPluginState.featureFlagsPluginState;
return clonedPluginState;
},
pmPlugins: function pmPlugins() {
return [{
name: 'annotation',
plugin: function plugin(_ref4) {
var dispatch = _ref4.dispatch;
if (annotationProviders) {
var _api$analytics2;
return (0, _inlineComment.inlineCommentPlugin)({
dispatch: dispatch,
provider: annotationProviders.inlineComment,
editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
featureFlagsPluginState: featureFlags,
selectCommentExperience: annotationProviders.selectCommentExperience,
viewInlineCommentTraceUFOPress: annotationProviders.viewInlineCommentTraceUFOPress,
annotationManager: annotationProviders.annotationManager,
api: api
});
}
return;
}
}, {
name: 'annotationKeymap',
plugin: function plugin() {
if (annotationProviders) {
return (0, _keymap.keymapPlugin)(api);
}
return;
}
}];
},
pluginsOptions: {
floatingToolbar: function floatingToolbar(state) {
var pluginState = (0, _utils.getPluginState)(state);
var bookmark = pluginState === null || pluginState === void 0 ? void 0 : pluginState.bookmark;
if ((0, _toolbar.shouldSuppressFloatingToolbar)({
state: state,
bookmark: bookmark
})) {
return (0, _toolbar.buildSuppressedToolbar)(state);
}
},
selectionToolbar: function selectionToolbar(state, intl) {
if (isToolbarAIFCEnabled) {
return;
}
if (!annotationProviders) {
return;
}
var pluginState = (0, _utils.getPluginState)(state);
if (pluginState && pluginState.isVisible && !pluginState.bookmark && !pluginState.mouseData.isSelecting) {
var _api$analytics3;
var _annotationProviders$ = annotationProviders.inlineComment,
isToolbarAbove = _annotationProviders$.isToolbarAbove,
onCommentButtonMount = _annotationProviders$.onCommentButtonMount,
getCanAddComments = _annotationProviders$.getCanAddComments,
contentType = _annotationProviders$.contentType;
var toolbarConfig = (0, _toolbar.buildToolbar)(api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions)({
state: state,
intl: intl,
isToolbarAbove: isToolbarAbove,
api: api,
createCommentExperience: annotationProviders.createCommentExperience,
annotationManager: annotationProviders.annotationManager,
onCommentButtonMount: onCommentButtonMount,
getCanAddComments: getCanAddComments,
contentType: contentType
});
if (!toolbarConfig) {
return undefined;
} else {
return _objectSpread(_objectSpread({}, toolbarConfig), {}, {
rank: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? 1 : undefined
});
}
}
}
},
contentComponent: function contentComponent(_ref5) {
var editorView = _ref5.editorView,
dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent;
if (!annotationProviders || !editorView || (0, _coreUtils.isSSR)()) {
return null;
}
return /*#__PURE__*/_react.default.createElement(AnnotationContentComponent, {
api: api,
editorView: editorView,
annotationProviders: annotationProviders,
dispatchAnalyticsEvent: dispatchAnalyticsEvent
});
}
};
};
var selector = function selector(states) {
var _states$annotationSta, _states$annotationSta2, _states$annotationSta3;
return {
isVisible: (_states$annotationSta = states.annotationState) === null || _states$annotationSta === void 0 ? void 0 : _states$annotationSta.isVisible,
selectedAnnotations: (_states$annotationSta2 = states.annotationState) === null || _states$annotationSta2 === void 0 ? void 0 : _states$annotationSta2.selectedAnnotations,
annotations: (_states$annotationSta3 = states.annotationState) === null || _states$annotationSta3 === void 0 ? void 0 : _states$annotationSta3.annotations
};
};
function AnnotationContentComponent(_ref6) {
var _api$analytics4;
var api = _ref6.api,
editorView = _ref6.editorView,
annotationProviders = _ref6.annotationProviders,
dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent;
var annotationState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['annotation'], selector);
// need to explicitly check for false as undefined is also a valid value to continue
if ((annotationState === null || annotationState === void 0 ? void 0 : annotationState.isVisible) === false) {
return null;
}
return /*#__PURE__*/_react.default.createElement("div", {
"data-editor-popup": "true"
}, /*#__PURE__*/_react.default.createElement(_InlineCommentView.InlineCommentView, {
providers: annotationProviders,
editorView: editorView,
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
editorAPI: api
}));
}