@atlaskit/editor-plugin-mentions
Version:
Mentions plugin for @atlaskit/editor-core
283 lines (281 loc) • 13.9 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.mentionsPlugin = 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 = _interopRequireWildcard(require("react"));
var _reactIntl = require("react-intl");
var _uuid = _interopRequireDefault(require("uuid"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _messages = require("@atlaskit/editor-common/messages");
var _providerFactory = require("@atlaskit/editor-common/provider-factory");
var _quickInsert = require("@atlaskit/editor-common/quick-insert");
var _resource = require("@atlaskit/mention/resource");
var _types = require("@atlaskit/mention/types");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _editorCommands = require("./editor-commands");
var _mentionNodeSpec = require("./nodeviews/mentionNodeSpec");
var _key = require("./pm-plugins/key");
var _main = require("./pm-plugins/main");
var _mentionPlaceholder = require("./pm-plugins/mentionPlaceholder");
var _InlineInviteRecaptchaContainer = require("./ui/InlineInviteRecaptchaContainer");
var _SecondaryToolbarComponent = require("./ui/SecondaryToolbarComponent");
var _typeAhead = require("./ui/type-ahead");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
var processName = function processName(name, intl) {
var unknownLabel = intl.formatMessage(_messages.mentionMessages.unknownLabel);
if (name.status === _types.MentionNameStatus.OK) {
return "@".concat(name.name || unknownLabel);
} else {
return "@".concat(unknownLabel);
}
};
/**
* We will need to clean this up once mentionProvider is
* put inside mention plugin.
* See: https://product-fabric.atlassian.net/browse/ED-26011
*/
function Component(_ref) {
var mentionProvider = _ref.mentionProvider,
api = _ref.api;
var mentionProviderMemo = (0, _react.useMemo)(function () {
return mentionProvider;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
var intl = (0, _reactIntl.useIntl)();
(0, _react.useEffect)(function () {
mentionProviderMemo === null || mentionProviderMemo === void 0 || mentionProviderMemo.then(function (mentionProviderSync) {
var _api$base;
api === null || api === void 0 || (_api$base = api.base) === null || _api$base === void 0 || (_api$base = _api$base.actions) === null || _api$base === void 0 || _api$base.registerMarks(function (_ref2) {
var tr = _ref2.tr,
node = _ref2.node,
pos = _ref2.pos;
var doc = tr.doc;
var schema = doc.type.schema;
var mentionNodeType = schema.nodes.mention;
var id = node.attrs.id;
if (node.type === mentionNodeType) {
if ((0, _resource.isResolvingMentionProvider)(mentionProviderSync)) {
var nameDetail = mentionProviderSync === null || mentionProviderSync === void 0 ? void 0 : mentionProviderSync.resolveMentionName(id);
var newText;
if ((0, _types.isPromise)(nameDetail)) {
newText = "@".concat(intl.formatMessage(_messages.mentionMessages.unknownLabel));
} else {
newText = processName(nameDetail, intl);
}
var currentPos = tr.mapping.map(pos);
tr.replaceWith(currentPos, currentPos + node.nodeSize, schema.text(newText, node.marks));
}
}
});
});
}, [mentionProviderMemo, api, intl]);
return null;
}
var mentionsPlugin = exports.mentionsPlugin = function mentionsPlugin(_ref3) {
var _options$sanitizePriv, _options$insertDispla;
var options = _ref3.config,
api = _ref3.api;
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
var sessionId = (0, _uuid.default)();
var previousMediaProvider;
var fireEvent = function fireEvent(payload, channel) {
var _api$analytics;
var fireAnalyticsEvent = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 ? void 0 : _api$analytics.fireAnalyticsEvent;
if (!fireAnalyticsEvent) {
return;
}
if (payload.attributes && !payload.attributes.sessionId) {
payload.attributes.sessionId = sessionId;
}
fireAnalyticsEvent(payload, channel);
};
var typeAhead = (0, _typeAhead.createTypeAheadConfig)({
sanitizePrivateContent: options === null || options === void 0 ? void 0 : options.sanitizePrivateContent,
mentionInsertDisplayName: options === null || options === void 0 ? void 0 : options.insertDisplayName,
HighlightComponent: options === null || options === void 0 ? void 0 : options.HighlightComponent,
handleMentionsChanged: options === null || options === void 0 ? void 0 : options.handleMentionsChanged,
fireEvent: fireEvent,
api: api
});
return {
name: 'mention',
nodes: function nodes() {
return [{
name: 'mention',
node: (0, _mentionNodeSpec.mentionNodeSpec)()
}];
},
pmPlugins: function pmPlugins() {
var plugins = [{
name: 'mention',
plugin: function plugin(pmPluginFactoryParams) {
return (0, _main.createMentionPlugin)({
pmPluginFactoryParams: pmPluginFactoryParams,
fireEvent: fireEvent,
options: options,
api: api
});
}
}];
if ((0, _platformFeatureFlags.fg)('jira_invites_auto_tag_new_user_in_mentions_fg')) {
plugins.push({
name: 'mentionPlaceholder',
plugin: function plugin() {
return (0, _mentionPlaceholder.createMentionPlaceholderPlugin)();
}
});
}
return plugins;
},
contentComponent: function contentComponent(_ref4) {
var editorView = _ref4.editorView,
providerFactory = _ref4.providerFactory;
if (!editorView) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
providers: ['mentionProvider'],
providerFactory: providerFactory
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
renderNode: function renderNode(_ref5) {
var mentionProvider = _ref5.mentionProvider;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Component, {
mentionProvider: mentionProvider,
api: api
}), (0, _platformFeatureFlags.fg)('jira_invites_auto_tag_new_user_in_mentions_fg') && /*#__PURE__*/_react.default.createElement(_InlineInviteRecaptchaContainer.InlineInviteRecaptchaContainer, {
mentionProvider: mentionProvider,
api: api
}));
}
});
},
secondaryToolbarComponent: function secondaryToolbarComponent(_ref6) {
var editorView = _ref6.editorView,
disabled = _ref6.disabled;
if (!editorView) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_SecondaryToolbarComponent.SecondaryToolbarComponent, {
editorView: editorView,
api: api,
disabled: disabled,
typeAhead: typeAhead
});
},
commands: {
insertMention: (0, _editorCommands.insertMention)({
sanitizePrivateContent: (_options$sanitizePriv = options === null || options === void 0 ? void 0 : options.sanitizePrivateContent) !== null && _options$sanitizePriv !== void 0 ? _options$sanitizePriv : false,
mentionInsertDisplayName: (_options$insertDispla = options === null || options === void 0 ? void 0 : options.insertDisplayName) !== null && _options$insertDispla !== void 0 ? _options$insertDispla : false,
api: api
})
},
actions: {
openTypeAhead: function openTypeAhead(inputMethod) {
var _api$typeAhead;
return Boolean(api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 || (_api$typeAhead = _api$typeAhead.actions) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.open({
triggerHandler: typeAhead,
inputMethod: inputMethod
}));
},
announceMentionsInsertion: function announceMentionsInsertion(mentionChanges) {
if (options !== null && options !== void 0 && options.handleMentionsChanged) {
options.handleMentionsChanged(mentionChanges);
}
},
setProvider: function () {
var _setProvider = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(providerPromise) {
var _api$core$actions$exe;
var provider;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if ((0, _platformFeatureFlags.fg)('platform_editor_mention_provider_via_plugin_config')) {
_context.next = 2;
break;
}
return _context.abrupt("return", false);
case 2:
_context.next = 4;
return providerPromise;
case 4:
provider = _context.sent;
if (!(previousMediaProvider === provider)) {
_context.next = 7;
break;
}
return _context.abrupt("return", false);
case 7:
previousMediaProvider = provider;
return _context.abrupt("return", (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(function (_ref7) {
var tr = _ref7.tr;
return tr.setMeta(_key.mentionPluginKey, {
action: _main.ACTIONS.SET_PROVIDER,
params: {
provider: provider
}
});
})) !== null && _api$core$actions$exe !== void 0 ? _api$core$actions$exe : false);
case 9:
case "end":
return _context.stop();
}
}, _callee);
}));
function setProvider(_x) {
return _setProvider.apply(this, arguments);
}
return setProvider;
}()
},
getSharedState: function getSharedState(editorState) {
if (!editorState) {
return undefined;
}
var mentionPluginState = _key.mentionPluginKey.getState(editorState);
return _objectSpread(_objectSpread({}, mentionPluginState), {}, {
typeAheadHandler: typeAhead
});
},
pluginsOptions: {
quickInsert: function quickInsert(_ref8) {
var formatMessage = _ref8.formatMessage;
return [{
id: 'mention',
title: formatMessage(_messages.toolbarInsertBlockMessages.mention),
description: formatMessage(_messages.toolbarInsertBlockMessages.mentionDescription),
keywords: ['team', 'user'],
priority: 400,
keyshortcut: '@',
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconMention, null);
},
action: function action(insert, state) {
var _api$typeAhead2;
var tr = insert(undefined);
var pluginState = _key.mentionPluginKey.getState(state);
if (pluginState && pluginState.canInsertMention === false) {
return false;
}
api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 || _api$typeAhead2.actions.openAtTransaction({
triggerHandler: typeAhead,
inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
})(tr);
return tr;
}
}];
},
typeAhead: typeAhead
}
};
};