@atlaskit/editor-plugin-mentions 4.2.0 → 4.3.0

package/dist/es2019/nodeviews/mentionNodeView.js

@@ -0,0 +1,139 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { browser } from '@atlaskit/editor-common/browser';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { isResolvingMentionProvider, MentionNameStatus } from '@atlaskit/mention/resource';
+import { isRestricted } from '@atlaskit/mention/types';
+import { profileCardRenderer } from './profileCardRenderer';
+const primitiveClassName = 'editor-mention-primitive';
+const toDOM = node => {
+  // packages/elements/mention/src/components/Mention/index.tsx
+  const mentionAttrs = {
+    contenteditable: 'false',
+    'data-access-level': node.attrs.accessLevel,
+    'data-mention-id': node.attrs.id,
+    'data-prosemirror-content-type': 'node',
+    'data-prosemirror-node-inline': 'true',
+    'data-prosemirror-node-name': 'mention',
+    'data-prosemirror-node-view-type': 'vanilla',
+    class: 'mentionView-content-wrap inlineNodeView'
+  };
+  return ['span', mentionAttrs, ['span', {
+    class: 'zeroWidthSpaceContainer'
+  }, ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, ZERO_WIDTH_SPACE]], ['span', {
+    spellcheck: 'false',
+    class: primitiveClassName
+  }, node.attrs.text || '@…'], browser.android ? ['span', {
+    class: 'zeroWidthSpaceContainer',
+    contenteditable: 'false'
+  }, ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, ZERO_WIDTH_SPACE]] : ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, ZERO_WIDTH_SPACE]];
+};
+const processName = name => {
+  return name.status === MentionNameStatus.OK ? `@${name.name || ''}` : `@_|unknown|_`;
+};
+const handleProviderName = async (mentionProvider, node) => {
+  if (isResolvingMentionProvider(mentionProvider) && node.attrs.id && !node.attrs.text) {
+    const nameDetail = mentionProvider === null || mentionProvider === void 0 ? void 0 : mentionProvider.resolveMentionName(node.attrs.id);
+    const resolvedNameDetail = await nameDetail;
+    return processName(resolvedNameDetail);
+  }
+};
+const getNewState = (isHighlighted, isRestricted) => {
+  if (isHighlighted) {
+    return 'self';
+  }
+  if (isRestricted) {
+    return 'restricted';
+  }
+  return 'default';
+};
+class MentionNodeView {
+  constructor(node, config) {
+    var _api$mention$sharedSt;
+    _defineProperty(this, "state", 'default');
+    const {
+      options,
+      api,
+      portalProviderAPI
+    } = config;
+    const {
+      dom,
+      contentDOM
+    } = DOMSerializer.renderSpec(document, toDOM(node));
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+    this.config = config;
+    this.node = node;
+    const {
+      mentionProvider
+    } = (_api$mention$sharedSt = api === null || api === void 0 ? void 0 : api.mention.sharedState.currentState()) !== null && _api$mention$sharedSt !== void 0 ? _api$mention$sharedSt : {};
+    this.updateState(mentionProvider);
+    this.cleanup = api === null || api === void 0 ? void 0 : api.mention.sharedState.onChange(({
+      nextSharedState
+    }) => {
+      this.updateState(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mentionProvider);
+    });
+    const {
+      destroyProfileCard,
+      removeProfileCard
+    } = profileCardRenderer({
+      dom,
+      options,
+      portalProviderAPI,
+      node,
+      api
+    });
+    this.destroyProfileCard = destroyProfileCard;
+    this.removeProfileCard = removeProfileCard;
+  }
+  setClassList(state) {
+    const mentionElement = this.getMentionPrimitive();
+    mentionElement === null || mentionElement === void 0 ? void 0 : mentionElement.classList.toggle('mention-self', state === 'self');
+    mentionElement === null || mentionElement === void 0 ? void 0 : mentionElement.classList.toggle('mention-restricted', state === 'restricted');
+  }
+  getMentionPrimitive() {
+    var _this$dom$querySelect;
+    return this.dom instanceof HTMLElement ? (_this$dom$querySelect = this.dom.querySelector(`.${primitiveClassName}`)) !== null && _this$dom$querySelect !== void 0 ? _this$dom$querySelect : undefined : undefined;
+  }
+  setTextContent(name) {
+    var _this$config$options;
+    if (!(this.dom instanceof HTMLElement)) {
+      return;
+    }
+    const mentionPrimitive = this.getMentionPrimitive();
+    if (mentionPrimitive && name && !this.node.attrs.text && (_this$config$options = this.config.options) !== null && _this$config$options !== void 0 && _this$config$options.sanitizePrivateContent) {
+      mentionPrimitive.textContent = name;
+    }
+  }
+  async updateState(mentionProvider) {
+    var _mentionProvider$shou;
+    const isHighlighted = (_mentionProvider$shou = mentionProvider === null || mentionProvider === void 0 ? void 0 : mentionProvider.shouldHighlightMention({
+      id: this.node.attrs.id
+    })) !== null && _mentionProvider$shou !== void 0 ? _mentionProvider$shou : false;
+    const newState = getNewState(isHighlighted, isRestricted(this.node.attrs.accessLevel));
+    if (newState !== this.state) {
+      this.setClassList(newState);
+      this.state = newState;
+    }
+    const name = await handleProviderName(mentionProvider, this.node);
+    this.setTextContent(name);
+  }
+  destroy() {
+    var _this$cleanup, _this$destroyProfileC;
+    (_this$cleanup = this.cleanup) === null || _this$cleanup === void 0 ? void 0 : _this$cleanup.call(this);
+    (_this$destroyProfileC = this.destroyProfileCard) === null || _this$destroyProfileC === void 0 ? void 0 : _this$destroyProfileC.call(this);
+  }
+  deselectNode() {
+    var _this$removeProfileCa;
+    (_this$removeProfileCa = this.removeProfileCard) === null || _this$removeProfileCa === void 0 ? void 0 : _this$removeProfileCa.call(this);
+  }
+}
+export const mentionNodeView = config => node => {
+  return new MentionNodeView(node, config);
+};

package/dist/es2019/nodeviews/profileCardRenderer.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { bind } from 'bind-event-listener';
+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;
+  const key = uuid();
+  let cleanupSelection;
+  const removeProfileCard = () => {
+    var _cleanupSelection;
+    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;
+        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
+  };
+};

package/dist/es2019/pm-plugins/main.js

@@ -5,7 +5,9 @@ import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
 import { SLI_EVENT_TYPE, SMART_EVENT_TYPE } from '@atlaskit/mention/resource';
 import { ComponentNames } from '@atlaskit/mention/types';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { MentionNodeView } from '../nodeviews/mention';
+import { mentionNodeView } from '../nodeviews/mentionNodeView';
 import { MENTION_PROVIDER_REJECTED, MENTION_PROVIDER_UNDEFINED } from '../types';
 import { mentionPluginKey } from './key';
 import { canMentionBeCreatedInRange } from './utils';
@@ -13,7 +15,7 @@ export const ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER'
 };
 const PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-const PACKAGE_VERSION = "4.2.0";
+const PACKAGE_VERSION = "4.3.0";
 const setProvider = provider => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(mentionPluginKey, {
@@ -91,15 +93,21 @@ export function createMentionPlugin({
     },
     props: {
       nodeViews: {
-        mention: getInlineNodeViewProducer({
-          pmPluginFactoryParams,
-          Component: MentionNodeView,
-          extraComponentProps: {
-            providerFactory: pmPluginFactoryParams.providerFactory,
-            pluginInjectionApi: api,
-            options
-          }
-        })
+        mention: (node, view, getPos, decorations, innerDecorations) => {
+          return editorExperiment('platform_editor_vanilla_dom', true) ? mentionNodeView({
+            options,
+            api,
+            portalProviderAPI: pmPluginFactoryParams.portalProviderAPI
+          })(node, view, getPos, decorations, innerDecorations) : getInlineNodeViewProducer({
+            pmPluginFactoryParams,
+            Component: MentionNodeView,
+            extraComponentProps: {
+              providerFactory: pmPluginFactoryParams.providerFactory,
+              pluginInjectionApi: api,
+              options
+            }
+          })(node, view, getPos, decorations);
+        }
       }
     },
     view(editorView) {
@@ -158,7 +166,7 @@ export function createMentionPlugin({
         },
         update(view, prevState) {
           const newState = view.state;
-          if (options !== null && options !== void 0 && options.handleMentionsChanged && fg('confluence_updated_mentions_livepages')) {
+          if (options !== null && options !== void 0 && options.handleMentionsChanged) {
             const mentionSchema = newState.schema.nodes.mention;
             const mentionNodesBefore = findChildrenByType(prevState.doc, mentionSchema);
             const mentionLocalIdsAfter = new Set(findChildrenByType(newState.doc, mentionSchema).map(({

package/dist/es2019/ui/ProfileCardComponent.compiled.css

@@ -0,0 +1,2 @@
+
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}

package/dist/es2019/ui/ProfileCardComponent.js

@@ -0,0 +1,143 @@
+/* ProfileCardComponent.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./ProfileCardComponent.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useEffect, useState, useMemo, Suspense } from 'react';
+import { bind } from 'bind-event-listener';
+import { Popup } from '@atlaskit/editor-common/ui';
+import Portal from '@atlaskit/portal';
+import { ProfileCardLazy } from '@atlaskit/profilecard/user';
+const styles = {
+  loadingStyles: "_2rkoglpi _16qs1cd0"
+};
+const LoadingWrapper = ({
+  children,
+  isLoading
+}) => isLoading ? /*#__PURE__*/React.createElement("div", {
+  className: ax([styles.loadingStyles])
+}, children) : children;
+export const useProfileCardState = ({
+  id,
+  provider
+}) => {
+  const [data, setData] = useState();
+  const [reportingLinesData, setReportingLinesData] = useState(undefined);
+  const [shouldShowGiveKudos, setShouldShowGiveKudos] = useState(false);
+  const [teamCentralBaseUrl, setTeamCentralBaseUrl] = useState(undefined);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasError, setHasError] = useState(false);
+
+  // From: packages/people-and-teams/profilecard/src/components/User/ProfileCardTrigger.tsx
+  useEffect(() => {
+    const fetchData = async () => {
+      if (!id || !provider) {
+        return;
+      }
+      setIsLoading(true);
+      try {
+        const [data, reportingLines, shouldGiveKudos, teamCentralBaseUrl] = await Promise.all([provider === null || provider === void 0 ? void 0 : provider.resourceClient.getProfile((provider === null || provider === void 0 ? void 0 : provider.cloudId) || '', id, () => {}), provider === null || provider === void 0 ? void 0 : provider.resourceClient.getReportingLines(id), provider === null || provider === void 0 ? void 0 : provider.resourceClient.shouldShowGiveKudos(), provider === null || provider === void 0 ? void 0 : provider.resourceClient.getTeamCentralBaseUrl({
+          withOrgContext: true,
+          withSiteContext: true
+        })]);
+        setData(data);
+        setReportingLinesData(reportingLines);
+        setShouldShowGiveKudos(shouldGiveKudos !== null && shouldGiveKudos !== void 0 ? shouldGiveKudos : false);
+        setTeamCentralBaseUrl(teamCentralBaseUrl);
+        setHasError(false);
+      } catch (e) {
+        setHasError(true);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchData();
+  }, [id, provider]);
+  return {
+    data,
+    reportingLinesData,
+    shouldShowGiveKudos,
+    teamCentralBaseUrl,
+    isLoading,
+    hasError
+  };
+};
+export function ProfileCardComponent({
+  profilecardProvider,
+  activeMention,
+  dom,
+  closeComponent
+}) {
+  var _ref;
+  const [provider, setProvider] = useState(undefined);
+  useEffect(() => {
+    profilecardProvider === null || profilecardProvider === void 0 ? void 0 : profilecardProvider.then(p => {
+      setProvider(p);
+    });
+  }, [profilecardProvider]);
+  const {
+    id,
+    text,
+    accessLevel
+  } = (_ref = activeMention.attrs) !== null && _ref !== void 0 ? _ref : {};
+  const actions = useMemo(() => provider === null || provider === void 0 ? void 0 : provider.getActions(id, text !== null && text !== void 0 ? text : '', accessLevel), [accessLevel, id, provider, text]);
+  const {
+    data,
+    reportingLinesData,
+    shouldShowGiveKudos,
+    teamCentralBaseUrl,
+    isLoading,
+    hasError
+  } = useProfileCardState({
+    id,
+    provider
+  });
+  useEffect(() => {
+    return bind(window, {
+      type: 'keydown',
+      listener: e => {
+        if (e.key === 'Escape') {
+          closeComponent();
+        }
+      }
+    });
+  });
+  if (!provider || !activeMention) {
+    return null;
+  }
+  const {
+    cloudId
+  } = provider;
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Popup, {
+    target: dom,
+    absoluteOffset: {
+      top: 8
+    },
+    stick: true
+  }, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(LoadingWrapper, {
+    isLoading: isLoading
+  }, /*#__PURE__*/React.createElement(ProfileCardLazy, {
+    avatarUrl: data === null || data === void 0 ? void 0 : data.avatarUrl,
+    accountType: data === null || data === void 0 ? void 0 : data.accountType,
+    status: data === null || data === void 0 ? void 0 : data.status,
+    statusModifiedDate: data === null || data === void 0 ? void 0 : data.statusModifiedDate,
+    timestring: data === null || data === void 0 ? void 0 : data.timestring,
+    isCurrentUser: data === null || data === void 0 ? void 0 : data.isCurrentUser,
+    isBot: data === null || data === void 0 ? void 0 : data.isBot,
+    fullName: data === null || data === void 0 ? void 0 : data.fullName,
+    userId: id,
+    cloudId: cloudId,
+    actions: actions,
+    isLoading: isLoading,
+    location: data === null || data === void 0 ? void 0 : data.location,
+    companyName: data === null || data === void 0 ? void 0 : data.companyName,
+    customLozenges: data === null || data === void 0 ? void 0 : data.customLozenges,
+    nickname: data === null || data === void 0 ? void 0 : data.nickname,
+    email: data === null || data === void 0 ? void 0 : data.email,
+    hasError: hasError,
+    reportingLines: reportingLinesData,
+    isKudosEnabled: shouldShowGiveKudos,
+    teamCentralBaseUrl: teamCentralBaseUrl
+  })))));
+}

package/dist/esm/nodeviews/mentionNodeView.js

@@ -0,0 +1,191 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { browser } from '@atlaskit/editor-common/browser';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { isResolvingMentionProvider, MentionNameStatus } from '@atlaskit/mention/resource';
+import { isRestricted } from '@atlaskit/mention/types';
+import { profileCardRenderer } from './profileCardRenderer';
+var primitiveClassName = 'editor-mention-primitive';
+var toDOM = function toDOM(node) {
+  // packages/elements/mention/src/components/Mention/index.tsx
+  var mentionAttrs = {
+    contenteditable: 'false',
+    'data-access-level': node.attrs.accessLevel,
+    'data-mention-id': node.attrs.id,
+    'data-prosemirror-content-type': 'node',
+    'data-prosemirror-node-inline': 'true',
+    'data-prosemirror-node-name': 'mention',
+    'data-prosemirror-node-view-type': 'vanilla',
+    class: 'mentionView-content-wrap inlineNodeView'
+  };
+  return ['span', mentionAttrs, ['span', {
+    class: 'zeroWidthSpaceContainer'
+  }, ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, ZERO_WIDTH_SPACE]], ['span', {
+    spellcheck: 'false',
+    class: primitiveClassName
+  }, node.attrs.text || '@…'], browser.android ? ['span', {
+    class: 'zeroWidthSpaceContainer',
+    contenteditable: 'false'
+  }, ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, ZERO_WIDTH_SPACE]] : ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, ZERO_WIDTH_SPACE]];
+};
+var processName = function processName(name) {
+  return name.status === MentionNameStatus.OK ? "@".concat(name.name || '') : "@_|unknown|_";
+};
+var handleProviderName = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mentionProvider, node) {
+    var nameDetail, resolvedNameDetail;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!(isResolvingMentionProvider(mentionProvider) && node.attrs.id && !node.attrs.text)) {
+            _context.next = 6;
+            break;
+          }
+          nameDetail = mentionProvider === null || mentionProvider === void 0 ? void 0 : mentionProvider.resolveMentionName(node.attrs.id);
+          _context.next = 4;
+          return nameDetail;
+        case 4:
+          resolvedNameDetail = _context.sent;
+          return _context.abrupt("return", processName(resolvedNameDetail));
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function handleProviderName(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var getNewState = function getNewState(isHighlighted, isRestricted) {
+  if (isHighlighted) {
+    return 'self';
+  }
+  if (isRestricted) {
+    return 'restricted';
+  }
+  return 'default';
+};
+var MentionNodeView = /*#__PURE__*/function () {
+  function MentionNodeView(node, config) {
+    var _api$mention$sharedSt,
+      _this = this;
+    _classCallCheck(this, MentionNodeView);
+    _defineProperty(this, "state", 'default');
+    var options = config.options,
+      api = config.api,
+      portalProviderAPI = config.portalProviderAPI;
+    var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(node)),
+      dom = _DOMSerializer$render.dom,
+      contentDOM = _DOMSerializer$render.contentDOM;
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+    this.config = config;
+    this.node = node;
+    var _ref2 = (_api$mention$sharedSt = api === null || api === void 0 ? void 0 : api.mention.sharedState.currentState()) !== null && _api$mention$sharedSt !== void 0 ? _api$mention$sharedSt : {},
+      mentionProvider = _ref2.mentionProvider;
+    this.updateState(mentionProvider);
+    this.cleanup = api === null || api === void 0 ? void 0 : api.mention.sharedState.onChange(function (_ref3) {
+      var nextSharedState = _ref3.nextSharedState;
+      _this.updateState(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mentionProvider);
+    });
+    var _profileCardRenderer = profileCardRenderer({
+        dom: dom,
+        options: options,
+        portalProviderAPI: portalProviderAPI,
+        node: node,
+        api: api
+      }),
+      destroyProfileCard = _profileCardRenderer.destroyProfileCard,
+      removeProfileCard = _profileCardRenderer.removeProfileCard;
+    this.destroyProfileCard = destroyProfileCard;
+    this.removeProfileCard = removeProfileCard;
+  }
+  return _createClass(MentionNodeView, [{
+    key: "setClassList",
+    value: function setClassList(state) {
+      var mentionElement = this.getMentionPrimitive();
+      mentionElement === null || mentionElement === void 0 || mentionElement.classList.toggle('mention-self', state === 'self');
+      mentionElement === null || mentionElement === void 0 || mentionElement.classList.toggle('mention-restricted', state === 'restricted');
+    }
+  }, {
+    key: "getMentionPrimitive",
+    value: function getMentionPrimitive() {
+      var _this$dom$querySelect;
+      return this.dom instanceof HTMLElement ? (_this$dom$querySelect = this.dom.querySelector(".".concat(primitiveClassName))) !== null && _this$dom$querySelect !== void 0 ? _this$dom$querySelect : undefined : undefined;
+    }
+  }, {
+    key: "setTextContent",
+    value: function setTextContent(name) {
+      var _this$config$options;
+      if (!(this.dom instanceof HTMLElement)) {
+        return;
+      }
+      var mentionPrimitive = this.getMentionPrimitive();
+      if (mentionPrimitive && name && !this.node.attrs.text && (_this$config$options = this.config.options) !== null && _this$config$options !== void 0 && _this$config$options.sanitizePrivateContent) {
+        mentionPrimitive.textContent = name;
+      }
+    }
+  }, {
+    key: "updateState",
+    value: function () {
+      var _updateState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(mentionProvider) {
+        var _mentionProvider$shou;
+        var isHighlighted, newState, name;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              isHighlighted = (_mentionProvider$shou = mentionProvider === null || mentionProvider === void 0 ? void 0 : mentionProvider.shouldHighlightMention({
+                id: this.node.attrs.id
+              })) !== null && _mentionProvider$shou !== void 0 ? _mentionProvider$shou : false;
+              newState = getNewState(isHighlighted, isRestricted(this.node.attrs.accessLevel));
+              if (newState !== this.state) {
+                this.setClassList(newState);
+                this.state = newState;
+              }
+              _context2.next = 5;
+              return handleProviderName(mentionProvider, this.node);
+            case 5:
+              name = _context2.sent;
+              this.setTextContent(name);
+            case 7:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function updateState(_x3) {
+        return _updateState.apply(this, arguments);
+      }
+      return updateState;
+    }()
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$cleanup, _this$destroyProfileC;
+      (_this$cleanup = this.cleanup) === null || _this$cleanup === void 0 || _this$cleanup.call(this);
+      (_this$destroyProfileC = this.destroyProfileCard) === null || _this$destroyProfileC === void 0 || _this$destroyProfileC.call(this);
+    }
+  }, {
+    key: "deselectNode",
+    value: function deselectNode() {
+      var _this$removeProfileCa;
+      (_this$removeProfileCa = this.removeProfileCard) === null || _this$removeProfileCa === void 0 || _this$removeProfileCa.call(this);
+    }
+  }]);
+}();
+export var mentionNodeView = function mentionNodeView(config) {
+  return function (node) {
+    return new MentionNodeView(node, config);
+  };
+};

package/dist/esm/nodeviews/profileCardRenderer.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { bind } from 'bind-event-listener';
+import uuid from 'uuid/v4';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { ProfileCardComponent } from '../ui/ProfileCardComponent';
+export var profileCardRenderer = function profileCardRenderer(_ref) {
+  var dom = _ref.dom,
+    options = _ref.options,
+    portalProviderAPI = _ref.portalProviderAPI,
+    node = _ref.node,
+    api = _ref.api;
+  var renderingProfileCard = false;
+  var key = uuid();
+  var cleanupSelection;
+  var removeProfileCard = function removeProfileCard() {
+    var _cleanupSelection;
+    portalProviderAPI.remove(key);
+    renderingProfileCard = false;
+    (_cleanupSelection = cleanupSelection) === null || _cleanupSelection === void 0 || _cleanupSelection();
+  };
+  var listenerCleanup = bind(dom, {
+    type: 'click',
+    listener: function listener() {
+      if (dom instanceof HTMLElement && options !== null && options !== void 0 && options.profilecardProvider && !renderingProfileCard) {
+        var _api$selection;
+        renderingProfileCard = true;
+        portalProviderAPI.render(function () {
+          return /*#__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 || (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.sharedState.onChange(function (_ref2) {
+          var nextSharedState = _ref2.nextSharedState;
+          var selection = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.selection;
+          if (selection instanceof NodeSelection ? selection.node === node : false) {
+            return;
+          }
+          removeProfileCard === null || removeProfileCard === void 0 || removeProfileCard();
+        });
+      }
+    }
+  });
+  return {
+    destroyProfileCard: function destroyProfileCard() {
+      listenerCleanup();
+      removeProfileCard === null || removeProfileCard === void 0 || removeProfileCard();
+    },
+    removeProfileCard: removeProfileCard
+  };
+};