@atlaskit/editor-plugin-mentions
Version:
Mentions plugin for @atlaskit/editor-core
91 lines • 4.09 kB
JavaScript
/* InlineInviteRecaptchaContainer.tsx generated by @compiled/babel-plugin v0.39.1 */
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback, useEffect, useState } from 'react';
import { mentionPlaceholderPluginKey, MENTION_PLACEHOLDER_ACTIONS } from '../pm-plugins/mentionPlaceholder';
import { MENTION_SOURCE } from '../ui/type-ahead/analytics';
/**
* Container that renders the recaptcha component from the mention provider and manages handleSuccess.
* Does NOT pass email - the provider's component uses useInlineInviteRecaptcha hook internally
* and wires showRecaptcha to the provider. When user clicks invite item, type-ahead calls
* mentionProvider.showInlineInviteRecaptcha(email) which passes email to the component.
*/
export var InlineInviteRecaptchaContainer = function InlineInviteRecaptchaContainer(_ref) {
var _api$mention2, _api$core3;
var mentionProvider = _ref.mentionProvider,
api = _ref.api;
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
provider = _useState2[0],
setProvider = _useState2[1];
useEffect(function () {
if (!mentionProvider) {
return;
}
var isMounted = true;
mentionProvider.then(function (resolvedProvider) {
if (!isMounted) {
return;
}
setProvider(resolvedProvider);
}).catch(function () {
// Silently handle promise rejection
});
return function () {
isMounted = false;
setProvider(null);
};
}, [mentionProvider]);
var handleSuccess = useCallback(function (userId, email) {
var _api$mention, _api$core;
if (!(api !== null && api !== void 0 && (_api$mention = api.mention) !== null && _api$mention !== void 0 && (_api$mention = _api$mention.commands) !== null && _api$mention !== void 0 && _api$mention.insertMention) || !(api !== null && api !== void 0 && (_api$core = api.core) !== null && _api$core !== void 0 && (_api$core = _api$core.actions) !== null && _api$core !== void 0 && _api$core.execute)) {
return;
}
var name = email.split('@')[0] || email;
api.core.actions.execute(api.mention.commands.insertMention({
id: userId,
name: name,
userType: 'DEFAULT',
accessLevel: 'CONTAINER'
}));
api.core.actions.execute(function (_ref2) {
var tr = _ref2.tr;
tr.setMeta(mentionPlaceholderPluginKey, {
action: MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER
});
return tr;
});
}, [api]);
var handleClose = useCallback(function () {
var _api$core2;
if (!(api !== null && api !== void 0 && (_api$core2 = api.core) !== null && _api$core2 !== void 0 && (_api$core2 = _api$core2.actions) !== null && _api$core2 !== void 0 && _api$core2.execute)) {
return;
}
api.core.actions.execute(function (_ref3) {
var tr = _ref3.tr;
tr.setMeta(mentionPlaceholderPluginKey, {
action: MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER
});
return tr;
});
}, [api]);
var handleReady = useCallback(function (showRecaptcha) {
if (provider) {
if (showRecaptcha) {
provider.showInlineInviteRecaptcha = showRecaptcha;
} else {
delete provider.showInlineInviteRecaptcha;
}
}
}, [provider]);
if (!(provider !== null && provider !== void 0 && provider.InlineInviteRecaptcha) || !(api !== null && api !== void 0 && (_api$mention2 = api.mention) !== null && _api$mention2 !== void 0 && (_api$mention2 = _api$mention2.commands) !== null && _api$mention2 !== void 0 && _api$mention2.insertMention) || !(api !== null && api !== void 0 && (_api$core3 = api.core) !== null && _api$core3 !== void 0 && (_api$core3 = _api$core3.actions) !== null && _api$core3 !== void 0 && _api$core3.execute)) {
return null;
}
var RecaptchaComponent = provider.InlineInviteRecaptcha;
return /*#__PURE__*/React.createElement(RecaptchaComponent, {
analyticsSource: MENTION_SOURCE,
onSuccess: handleSuccess,
onClose: handleClose,
onReady: handleReady
});
};