@atlaskit/editor-plugin-mentions
Version:
Mentions plugin for @atlaskit/editor-core
147 lines • 6.29 kB
JavaScript
/* InlineInvitePopupContainer.tsx generated by @compiled/babel-plugin v2.0.0 */
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback, useEffect, useRef, useState } from 'react';
var findMentionRange = function findMentionRange(doc, localId) {
var range = null;
doc.descendants(function (node, pos) {
if (range) {
return false;
}
if (node.type.name === 'mention' && node.attrs.localId === localId) {
range = {
from: pos,
to: pos + node.nodeSize
};
return false;
}
return true;
});
return range;
};
export var InlineInvitePopupContainer = function InlineInvitePopupContainer(_ref) {
var _api$mention2, _api$core3;
var mentionProvider = _ref.mentionProvider,
api = _ref.api,
editorView = _ref.editorView;
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
provider = _useState2[0],
setProvider = _useState2[1];
var _useState3 = useState(null),
_useState4 = _slicedToArray(_useState3, 2),
anchorElement = _useState4[0],
setAnchorElement = _useState4[1];
var pendingMentionRef = useRef(null);
useEffect(function () {
if (!mentionProvider) {
return;
}
var isMounted = true;
var cleanupProvider;
mentionProvider.then(function (resolvedProvider) {
var _providerWithPopup$ge;
if (!isMounted) {
return;
}
var providerWithPopup = resolvedProvider;
var originalGetMentionDisabledState = (_providerWithPopup$ge = providerWithPopup.getMentionDisabledState) === null || _providerWithPopup$ge === void 0 ? void 0 : _providerWithPopup$ge.bind(providerWithPopup);
providerWithPopup.getMentionDisabledState = function (mention) {
var _pendingMentionRef$cu;
if (((_pendingMentionRef$cu = pendingMentionRef.current) === null || _pendingMentionRef$cu === void 0 ? void 0 : _pendingMentionRef$cu.localId) === mention.id) {
return {
disabled: true
};
}
return originalGetMentionDisabledState === null || originalGetMentionDisabledState === void 0 ? void 0 : originalGetMentionDisabledState(mention);
};
cleanupProvider = function cleanupProvider() {
if (originalGetMentionDisabledState) {
providerWithPopup.getMentionDisabledState = originalGetMentionDisabledState;
} else {
delete providerWithPopup.getMentionDisabledState;
}
};
setProvider(providerWithPopup);
}).catch(function () {});
return function () {
var _cleanupProvider;
isMounted = false;
(_cleanupProvider = cleanupProvider) === null || _cleanupProvider === void 0 || _cleanupProvider();
setProvider(null);
};
}, [mentionProvider]);
var removePendingMention = useCallback(function () {
var _api$core;
var pending = pendingMentionRef.current;
if (pending && 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) {
api.core.actions.execute(function (_ref2) {
var tr = _ref2.tr;
var range = findMentionRange(tr.doc, pending.localId);
return range ? tr.delete(range.from, range.to) : null;
});
}
pendingMentionRef.current = null;
setAnchorElement(null);
}, [api]);
var handleDismiss = useCallback(function () {
removePendingMention();
}, [removePendingMention]);
var handleInviteComplete = useCallback(function (result) {
var _result$invited$, _api$core2, _api$mention;
var pending = pendingMentionRef.current;
if (!pending) {
return;
}
var invitedUser = (_result$invited$ = result.invited[0]) !== null && _result$invited$ !== void 0 ? _result$invited$ : result.requested[0];
if (!invitedUser || !(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) || !(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)) {
return;
}
var userId = invitedUser.id,
email = invitedUser.email;
api.core.actions.execute(function (_ref3) {
var tr = _ref3.tr;
var range = findMentionRange(tr.doc, pending.localId);
return range ? tr.delete(range.from, range.to) : null;
});
api.core.actions.execute(api.mention.commands.insertMention({
id: userId,
name: email,
userType: 'DEFAULT',
accessLevel: 'CONTAINER'
}));
pendingMentionRef.current = null;
setAnchorElement(null);
}, [api]);
var handleReady = useCallback(function (show) {
if (!provider) {
return;
}
if (show) {
provider.showInlineInvitePopup = function (email, localId) {
pendingMentionRef.current = {
email: email,
localId: localId
};
setTimeout(function () {
var range = findMentionRange(editorView.state.doc, localId);
var dom = range ? editorView.nodeDOM(range.from) : null;
setAnchorElement(dom instanceof HTMLElement ? dom : null);
show(email);
}, 0);
};
} else {
delete provider.showInlineInvitePopup;
}
}, [provider, editorView]);
if (!(provider !== null && provider !== void 0 && provider.InlineInvitePopup) || !(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 PopupComponent = provider.InlineInvitePopup;
return /*#__PURE__*/React.createElement(PopupComponent, {
anchorElement: anchorElement,
onInviteComplete: handleInviteComplete,
onDismiss: handleDismiss,
onReady: handleReady
});
};