@atlaskit/editor-plugin-mentions
Version:
Mentions plugin for @atlaskit/editor-core
62 lines • 2.73 kB
JavaScript
import React from 'react';
import { bind } from 'bind-event-listener';
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
import uuid from 'uuid/v4';
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
import { ProfileCardComponent } from '../ui/ProfileCardComponent';
export const profileCardRenderer = ({
dom,
options,
portalProviderAPI,
node,
api
}) => {
let renderingProfileCard = false;
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
const key = uuid();
let cleanupSelection;
const removeProfileCard = () => {
var _cleanupSelection;
if (dom instanceof HTMLElement) {
dom.setAttribute('aria-expanded', 'false');
}
portalProviderAPI.remove(key);
renderingProfileCard = false;
(_cleanupSelection = cleanupSelection) === null || _cleanupSelection === void 0 ? void 0 : _cleanupSelection();
};
const listenerCleanup = bind(dom, {
type: 'click',
listener: () => {
if (dom instanceof HTMLElement && options !== null && options !== void 0 && options.profilecardProvider && !renderingProfileCard) {
var _api$selection;
dom.setAttribute('aria-expanded', 'true');
renderingProfileCard = true;
portalProviderAPI.render(() => /*#__PURE__*/React.createElement(ProfileCardComponent, {
activeMention: node,
profilecardProvider: options === null || options === void 0 ? void 0 : options.profilecardProvider,
dom: dom,
closeComponent: removeProfileCard
}), dom, key);
// If we change the selection we should also remove the profile card. The "deselectNode"
// should usually catch this, but it's possible (ie. on triple click) for this not to be called
// which means the profile card gets stuck open until you click + change selection
cleanupSelection = api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.sharedState.onChange(({
nextSharedState
}) => {
const selection = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.selection;
if (selection instanceof NodeSelection ? selection.node === node : false) {
return;
}
removeProfileCard === null || removeProfileCard === void 0 ? void 0 : removeProfileCard();
});
}
}
});
return {
destroyProfileCard: () => {
listenerCleanup();
removeProfileCard === null || removeProfileCard === void 0 ? void 0 : removeProfileCard();
},
removeProfileCard
};
};