@atlaskit/editor-plugin-mentions
Version:
Mentions plugin for @atlaskit/editor-core
90 lines • 4 kB
JavaScript
/* InlineInviteRecaptchaContainer.tsx generated by @compiled/babel-plugin v0.39.1 */
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 const InlineInviteRecaptchaContainer = ({
mentionProvider,
api
}) => {
var _api$mention2, _api$mention2$command, _api$core3, _api$core3$actions;
const [provider, setProvider] = useState(null);
useEffect(() => {
if (!mentionProvider) {
return;
}
let isMounted = true;
mentionProvider.then(resolvedProvider => {
if (!isMounted) {
return;
}
setProvider(resolvedProvider);
}).catch(() => {
// Silently handle promise rejection
});
return () => {
isMounted = false;
setProvider(null);
};
}, [mentionProvider]);
const handleSuccess = useCallback((userId, email) => {
var _api$mention, _api$mention$commands, _api$core, _api$core$actions;
if (!(api !== null && api !== void 0 && (_api$mention = api.mention) !== null && _api$mention !== void 0 && (_api$mention$commands = _api$mention.commands) !== null && _api$mention$commands !== void 0 && _api$mention$commands.insertMention) || !(api !== null && api !== void 0 && (_api$core = api.core) !== null && _api$core !== void 0 && (_api$core$actions = _api$core.actions) !== null && _api$core$actions !== void 0 && _api$core$actions.execute)) {
return;
}
const name = email.split('@')[0] || email;
api.core.actions.execute(api.mention.commands.insertMention({
id: userId,
name,
userType: 'DEFAULT',
accessLevel: 'CONTAINER'
}));
api.core.actions.execute(({
tr
}) => {
tr.setMeta(mentionPlaceholderPluginKey, {
action: MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER
});
return tr;
});
}, [api]);
const handleClose = useCallback(() => {
var _api$core2, _api$core2$actions;
if (!(api !== null && api !== void 0 && (_api$core2 = api.core) !== null && _api$core2 !== void 0 && (_api$core2$actions = _api$core2.actions) !== null && _api$core2$actions !== void 0 && _api$core2$actions.execute)) {
return;
}
api.core.actions.execute(({
tr
}) => {
tr.setMeta(mentionPlaceholderPluginKey, {
action: MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER
});
return tr;
});
}, [api]);
const handleReady = useCallback(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$command = _api$mention2.commands) !== null && _api$mention2$command !== void 0 && _api$mention2$command.insertMention) || !(api !== null && api !== void 0 && (_api$core3 = api.core) !== null && _api$core3 !== void 0 && (_api$core3$actions = _api$core3.actions) !== null && _api$core3$actions !== void 0 && _api$core3$actions.execute)) {
return null;
}
const RecaptchaComponent = provider.InlineInviteRecaptcha;
return /*#__PURE__*/React.createElement(RecaptchaComponent, {
analyticsSource: MENTION_SOURCE,
onSuccess: handleSuccess,
onClose: handleClose,
onReady: handleReady
});
};