@atlaskit/editor-plugin-mentions 12.2.10 → 12.2.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/nodeviews/profileCardRenderer.js +91 -72
  3. package/dist/cjs/pm-plugins/main.js +1 -1
  4. package/dist/cjs/ui/ProfileCardComponent.js +95 -36
  5. package/dist/es2019/nodeviews/profileCardRenderer.js +89 -74
  6. package/dist/es2019/pm-plugins/main.js +1 -1
  7. package/dist/es2019/ui/ProfileCardComponent.js +67 -17
  8. package/dist/esm/nodeviews/profileCardRenderer.js +92 -73
  9. package/dist/esm/pm-plugins/main.js +1 -1
  10. package/dist/esm/ui/ProfileCardComponent.js +91 -34
  11. package/dist/types/ui/ProfileCardComponent.d.ts +4 -0
  12. package/dist/types-ts4.5/ui/ProfileCardComponent.d.ts +4 -0
  13. package/package.json +2 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/editor-plugin-mentions
2
2
 
3
+ ## 12.2.11
4
+
5
+ ### Patch Changes
6
+
7
+ - [`8a065eba1d509`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8a065eba1d509) -
8
+ Show agent profile cards for agent mentions in the editor.
9
+
3
10
  ## 12.2.10
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/nodeviews/profileCardRenderer.js CHANGED
@@ -11,6 +11,7 @@ var _v = _interopRequireDefault(require("uuid/v4"));
11
11
  var _state = require("@atlaskit/editor-prosemirror/state");
12
12
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
13
  var _navigation = require("@atlaskit/teams-app-config/navigation");
14
+ var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
14
15
  var _ProfileCardComponent = require("../ui/ProfileCardComponent");
15
16
  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
16
17
 
@@ -34,87 +35,105 @@ var profileCardRenderer = exports.profileCardRenderer = function profileCardRend
34
35
  renderingProfileCard = false;
35
36
  (_cleanupSelection = cleanupSelection) === null || _cleanupSelection === void 0 || _cleanupSelection();
36
37
  };
38
+ var renderProfileCardPopup = function renderProfileCardPopup(renderProfileCard) {
39
+ var _api$selection;
40
+ if (!(dom instanceof HTMLElement) || renderingProfileCard) {
41
+ return;
42
+ }
43
+ var referenceElement = dom;
44
+ referenceElement.setAttribute('aria-expanded', 'true');
45
+ renderingProfileCard = true;
46
+ portalProviderAPI.render(function () {
47
+ return renderProfileCard(referenceElement);
48
+ }, referenceElement, key);
49
+ cleanupSelection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.sharedState.onChange(function (_ref2) {
50
+ var nextSharedState = _ref2.nextSharedState;
51
+ var selection = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.selection;
52
+ if (selection instanceof _state.NodeSelection ? selection.node === node : false) {
53
+ return;
54
+ }
55
+ removeProfileCard === null || removeProfileCard === void 0 || removeProfileCard();
56
+ });
57
+ };
58
+ var renderEditorProfileCard = function renderEditorProfileCard() {
59
+ renderProfileCardPopup(function (referenceElement) {
60
+ return /*#__PURE__*/_react.default.createElement(_ProfileCardComponent.ProfileCardComponent, {
61
+ activeMention: node,
62
+ profilecardProvider: options === null || options === void 0 ? void 0 : options.profilecardProvider,
63
+ dom: referenceElement,
64
+ closeComponent: removeProfileCard
65
+ });
66
+ });
67
+ };
68
+ var renderUserProfileCard = function renderUserProfileCard(_ref3) {
69
+ var userId = _ref3.userId,
70
+ cloudId = _ref3.cloudId,
71
+ renderUserMentionCard = _ref3.renderUserMentionCard;
72
+ if (!renderUserMentionCard) {
73
+ return false;
74
+ }
75
+ renderProfileCardPopup(function (referenceElement) {
76
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderUserMentionCard({
77
+ userId: userId,
78
+ cloudId: cloudId,
79
+ children: null,
80
+ referenceElement: referenceElement
81
+ }));
82
+ });
83
+ return true;
84
+ };
85
+ var navigateToProfile = function navigateToProfile(userId, cloudId) {
86
+ if (navigatingToProfile) {
87
+ return;
88
+ }
89
+ navigatingToProfile = true;
90
+ var _navigateToTeamsApp = (0, _navigation.navigateToTeamsApp)({
91
+ type: 'USER',
92
+ payload: {
93
+ userId: userId
94
+ },
95
+ cloudId: cloudId
96
+ }),
97
+ href = _navigateToTeamsApp.href,
98
+ target = _navigateToTeamsApp.target;
99
+ window.open(href, target, 'noopener,noreferrer');
100
+ };
101
+ var renderDefaultProfileCard = function renderDefaultProfileCard(userId, provider) {
102
+ if (renderUserProfileCard({
103
+ userId: userId,
104
+ cloudId: provider.cloudId,
105
+ renderUserMentionCard: provider.renderUserMentionCard
106
+ })) {
107
+ return;
108
+ }
109
+ navigateToProfile(userId, provider.cloudId);
110
+ };
37
111
  var listenerCleanup = (0, _bindEventListener.bind)(dom, {
38
112
  type: 'click',
39
113
  listener: function listener() {
40
114
  if ((0, _platformFeatureFlags.fg)('people-teams_migrate-user-profile-card')) {
41
- var _node$attrs;
115
+ var _node$attrs, _options$profilecardP;
42
116
  var userId = (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.id;
43
- if (userId) {
44
- var _options$profilecardP;
45
- navigatingToProfile = false;
46
- options === null || options === void 0 || (_options$profilecardP = options.profilecardProvider) === null || _options$profilecardP === void 0 || _options$profilecardP.then(function (provider) {
47
- // If a consumer (e.g. Confluence) has supplied a custom profile card
48
- // renderer, render it into the portal instead of navigating away. The
49
- // consumer owns its own popup/positioning behavior - subsequent clicks
50
- // while the card is already open are no-ops here so the card's own
51
- // outside-click / toggle logic can take over.
52
- if (provider.renderUserMentionCard) {
53
- if (dom instanceof HTMLElement && !renderingProfileCard) {
54
- var _api$selection;
55
- dom.setAttribute('aria-expanded', 'true');
56
- renderingProfileCard = true;
57
- portalProviderAPI.render(function () {
58
- var _provider$renderUserM;
59
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (_provider$renderUserM = provider.renderUserMentionCard) === null || _provider$renderUserM === void 0 ? void 0 : _provider$renderUserM.call(provider, {
60
- userId: userId,
61
- cloudId: provider.cloudId,
62
- children: null,
63
- referenceElement: dom
64
- }));
65
- }, dom, key);
66
- cleanupSelection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.sharedState.onChange(function (_ref2) {
67
- var nextSharedState = _ref2.nextSharedState;
68
- var selection = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.selection;
69
- if (selection instanceof _state.NodeSelection ? selection.node === node : false) {
70
- return;
71
- }
72
- removeProfileCard === null || removeProfileCard === void 0 || removeProfileCard();
73
- });
74
- }
75
- return;
76
- }
77
- if (navigatingToProfile) {
78
- return;
79
- }
80
- navigatingToProfile = true;
81
- var _navigateToTeamsApp = (0, _navigation.navigateToTeamsApp)({
82
- type: 'USER',
83
- payload: {
84
- userId: userId
85
- },
86
- cloudId: provider.cloudId
87
- }),
88
- href = _navigateToTeamsApp.href,
89
- target = _navigateToTeamsApp.target;
90
- window.open(href, target, 'noopener,noreferrer');
91
- });
117
+ if (!userId) {
118
+ return;
92
119
  }
93
- return;
94
- }
95
- if (dom instanceof HTMLElement && options !== null && options !== void 0 && options.profilecardProvider && !renderingProfileCard) {
96
- var _api$selection2;
97
- dom.setAttribute('aria-expanded', 'true');
98
- renderingProfileCard = true;
99
- portalProviderAPI.render(function () {
100
- return /*#__PURE__*/_react.default.createElement(_ProfileCardComponent.ProfileCardComponent, {
101
- activeMention: node,
102
- profilecardProvider: options === null || options === void 0 ? void 0 : options.profilecardProvider,
103
- dom: dom,
104
- closeComponent: removeProfileCard
105
- });
106
- }, dom, key);
107
- // If we change the selection we should also remove the profile card. The "deselectNode"
108
- // should usually catch this, but it's possible (ie. on triple click) for this not to be called
109
- // which means the profile card gets stuck open until you click + change selection
110
- cleanupSelection = api === null || api === void 0 || (_api$selection2 = api.selection) === null || _api$selection2 === void 0 ? void 0 : _api$selection2.sharedState.onChange(function (_ref3) {
111
- var nextSharedState = _ref3.nextSharedState;
112
- var selection = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.selection;
113
- if (selection instanceof _state.NodeSelection ? selection.node === node : false) {
120
+ navigatingToProfile = false;
121
+ options === null || options === void 0 || (_options$profilecardP = options.profilecardProvider) === null || _options$profilecardP === void 0 || _options$profilecardP.then(function (provider) {
122
+ var _node$attrs2;
123
+ if (!(0, _expVal.expVal)('platform_editor_agent_mentions', 'isEnabled', false)) {
124
+ renderDefaultProfileCard(userId, provider);
114
125
  return;
115
126
  }
116
- removeProfileCard === null || removeProfileCard === void 0 || removeProfileCard();
127
+ if ((0, _ProfileCardComponent.isAgentMentionType)((_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.userType)) {
128
+ renderEditorProfileCard();
129
+ } else {
130
+ renderDefaultProfileCard(userId, provider);
131
+ }
117
132
  });
133
+ return;
134
+ }
135
+ if (options !== null && options !== void 0 && options.profilecardProvider) {
136
+ renderEditorProfileCard();
118
137
  }
119
138
  }
120
139
  });
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -23,7 +23,7 @@ var ACTIONS = exports.ACTIONS = {
23
23
  SET_PROVIDER: 'SET_PROVIDER'
24
24
  };
25
25
  var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
26
- var PACKAGE_VERSION = "12.2.9";
26
+ var PACKAGE_VERSION = "12.2.10";
27
27
  var setProvider = function setProvider(provider) {
28
28
  return function (state, dispatch) {
29
29
  if (dispatch) {
package/dist/cjs/ui/ProfileCardComponent.js CHANGED
@@ -2,37 +2,56 @@
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
5
  Object.defineProperty(exports, "__esModule", {
7
6
  value: true
8
7
  });
9
8
  exports.ProfileCardComponent = ProfileCardComponent;
10
- exports.useProfileCardState = void 0;
9
+ exports.useProfileCardState = exports.isAgentMentionType = void 0;
11
10
  require("./ProfileCardComponent.compiled.css");
12
11
  var _react = _interopRequireWildcard(require("react"));
13
12
  var React = _react;
14
13
  var _runtime = require("@compiled/react/runtime");
15
14
  var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
15
+ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
16
16
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
17
17
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
18
18
  var _bindEventListener = require("bind-event-listener");
19
+ var _reactLoadable = _interopRequireDefault(require("react-loadable"));
19
20
  var _user = require("@atlaskit/profilecard/user");
20
21
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
22
+ var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
21
23
  var _PopperWrapper = require("./PopperWrapper");
22
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
24
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
25
+ var AgentProfileCardResourcedLazy = (0, _reactLoadable.default)({
26
+ loader: function loader() {
27
+ return Promise.resolve().then(function () {
28
+ return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-mentions-agent-profile-card-resourced" */
29
+ '@atlaskit/profilecard/agent-profile-card-resourced'));
30
+ }).then(function (_ref) {
31
+ var AgentProfileCardResourced = _ref.AgentProfileCardResourced;
32
+ return AgentProfileCardResourced;
33
+ });
34
+ },
35
+ loading: function loading() {
36
+ return null;
37
+ }
38
+ });
23
39
  var styles = {
24
40
  loadingStyles: "_2rko12b0 _16qs130s"
25
41
  };
26
- var LoadingWrapper = function LoadingWrapper(_ref) {
27
- var children = _ref.children,
28
- isLoading = _ref.isLoading;
42
+ var LoadingWrapper = function LoadingWrapper(_ref2) {
43
+ var children = _ref2.children,
44
+ isLoading = _ref2.isLoading;
29
45
  return isLoading ? /*#__PURE__*/React.createElement("div", {
30
46
  className: (0, _runtime.ax)([styles.loadingStyles])
31
47
  }, children) : children;
32
48
  };
33
- var useProfileCardState = exports.useProfileCardState = function useProfileCardState(_ref2) {
34
- var id = _ref2.id,
35
- provider = _ref2.provider;
49
+ var isAgentMentionType = exports.isAgentMentionType = function isAgentMentionType(userType) {
50
+ return userType === 'APP' || userType === 'AGENT';
51
+ };
52
+ var useProfileCardState = exports.useProfileCardState = function useProfileCardState(_ref3) {
53
+ var id = _ref3.id,
54
+ provider = _ref3.provider;
36
55
  var _useState = (0, _react.useState)(),
37
56
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
38
57
  data = _useState2[0],
@@ -61,7 +80,7 @@ var useProfileCardState = exports.useProfileCardState = function useProfileCardS
61
80
  // From: packages/people-and-teams/profilecard/src/components/User/ProfileCardTrigger.tsx
62
81
  (0, _react.useEffect)(function () {
63
82
  var fetchData = /*#__PURE__*/function () {
64
- var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
83
+ var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
65
84
  var _yield$Promise$all, _yield$Promise$all2, _data, reportingLines, shouldGiveKudos, _teamCentralBaseUrl, _t;
66
85
  return _regenerator.default.wrap(function (_context) {
67
86
  while (1) switch (_context.prev = _context.next) {
@@ -108,7 +127,7 @@ var useProfileCardState = exports.useProfileCardState = function useProfileCardS
108
127
  }, _callee, null, [[2, 4, 5, 6]]);
109
128
  }));
110
129
  return function fetchData() {
111
- return _ref3.apply(this, arguments);
130
+ return _ref4.apply(this, arguments);
112
131
  };
113
132
  }();
114
133
  fetchData();
@@ -122,12 +141,16 @@ var useProfileCardState = exports.useProfileCardState = function useProfileCardS
122
141
  hasError: hasError
123
142
  };
124
143
  };
125
- function ProfileCardComponent(_ref4) {
126
- var _ref6;
127
- var profilecardProvider = _ref4.profilecardProvider,
128
- activeMention = _ref4.activeMention,
129
- dom = _ref4.dom,
130
- closeComponent = _ref4.closeComponent;
144
+
145
+ /**
146
+ * Renders the profile card popup for an editor mention node.
147
+ */
148
+ function ProfileCardComponent(_ref5) {
149
+ var _ref7;
150
+ var profilecardProvider = _ref5.profilecardProvider,
151
+ activeMention = _ref5.activeMention,
152
+ dom = _ref5.dom,
153
+ closeComponent = _ref5.closeComponent;
131
154
  var _useState11 = (0, _react.useState)(undefined),
132
155
  _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
133
156
  provider = _useState12[0],
@@ -137,10 +160,58 @@ function ProfileCardComponent(_ref4) {
137
160
  setProvider(p);
138
161
  });
139
162
  }, [profilecardProvider]);
140
- var _ref5 = (_ref6 = activeMention.attrs) !== null && _ref6 !== void 0 ? _ref6 : {},
141
- id = _ref5.id,
142
- text = _ref5.text,
143
- accessLevel = _ref5.accessLevel;
163
+ var _ref6 = (_ref7 = activeMention.attrs) !== null && _ref7 !== void 0 ? _ref7 : {},
164
+ id = _ref6.id,
165
+ text = _ref6.text,
166
+ accessLevel = _ref6.accessLevel,
167
+ userType = _ref6.userType;
168
+ (0, _react.useEffect)(function () {
169
+ return (0, _bindEventListener.bind)(window, {
170
+ type: 'keydown',
171
+ listener: function listener(e) {
172
+ if (e.key === 'Escape') {
173
+ closeComponent();
174
+ }
175
+ }
176
+ });
177
+ });
178
+ if (!(0, _expVal.expVal)('platform_editor_agent_mentions', 'isEnabled', false)) {
179
+ return /*#__PURE__*/React.createElement(_PopperWrapper.Popup, {
180
+ referenceElement: dom
181
+ }, /*#__PURE__*/React.createElement(UserProfileCardContent, {
182
+ accessLevel: accessLevel,
183
+ id: id,
184
+ provider: provider,
185
+ text: text
186
+ }));
187
+ }
188
+ var isAgentMention = isAgentMentionType(userType);
189
+ return /*#__PURE__*/React.createElement(_PopperWrapper.Popup, {
190
+ referenceElement: dom
191
+ }, isAgentMention && provider && id ? /*#__PURE__*/React.createElement(AgentProfileCardContent, {
192
+ accountId: id,
193
+ provider: provider
194
+ }) : /*#__PURE__*/React.createElement(UserProfileCardContent, {
195
+ accessLevel: accessLevel,
196
+ id: id,
197
+ provider: provider,
198
+ text: text
199
+ }));
200
+ }
201
+ var AgentProfileCardContent = function AgentProfileCardContent(_ref8) {
202
+ var accountId = _ref8.accountId,
203
+ provider = _ref8.provider;
204
+ return /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, {
205
+ accountId: accountId,
206
+ cloudId: provider.cloudId,
207
+ resourceClient: provider.resourceClient
208
+ });
209
+ };
210
+ var UserProfileCardContent = function UserProfileCardContent(_ref9) {
211
+ var accessLevel = _ref9.accessLevel,
212
+ id = _ref9.id,
213
+ provider = _ref9.provider,
214
+ text = _ref9.text;
144
215
  var actions = (0, _react.useMemo)(function () {
145
216
  return provider === null || provider === void 0 ? void 0 : provider.getActions(id, text !== null && text !== void 0 ? text : '', accessLevel);
146
217
  }, [accessLevel, id, provider, text]);
@@ -154,19 +225,7 @@ function ProfileCardComponent(_ref4) {
154
225
  teamCentralBaseUrl = _useProfileCardState.teamCentralBaseUrl,
155
226
  isLoading = _useProfileCardState.isLoading,
156
227
  hasError = _useProfileCardState.hasError;
157
- (0, _react.useEffect)(function () {
158
- return (0, _bindEventListener.bind)(window, {
159
- type: 'keydown',
160
- listener: function listener(e) {
161
- if (e.key === 'Escape') {
162
- closeComponent();
163
- }
164
- }
165
- });
166
- });
167
- return /*#__PURE__*/React.createElement(_PopperWrapper.Popup, {
168
- referenceElement: dom
169
- }, /*#__PURE__*/React.createElement(LoadingWrapper, {
228
+ return /*#__PURE__*/React.createElement(LoadingWrapper, {
170
229
  isLoading: isLoading
171
230
  }, /*#__PURE__*/React.createElement(_user.ProfileCardLazy, {
172
231
  avatarUrl: data === null || data === void 0 ? void 0 : data.avatarUrl,
@@ -191,5 +250,5 @@ function ProfileCardComponent(_ref4) {
191
250
  isKudosEnabled: shouldShowGiveKudos,
192
251
  teamCentralBaseUrl: teamCentralBaseUrl,
193
252
  isRenderedInPortal: (0, _expValEquals.expValEquals)('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true)
194
- })));
195
- }
253
+ }));
254
+ };
package/dist/es2019/nodeviews/profileCardRenderer.js CHANGED
@@ -5,7 +5,8 @@ import uuid from 'uuid/v4';
5
5
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
6
6
  import { fg } from '@atlaskit/platform-feature-flags';
7
7
  import { navigateToTeamsApp } from '@atlaskit/teams-app-config/navigation';
8
- import { ProfileCardComponent } from '../ui/ProfileCardComponent';
8
+ import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
9
+ import { isAgentMentionType, ProfileCardComponent } from '../ui/ProfileCardComponent';
9
10
  export const profileCardRenderer = ({
10
11
  dom,
11
12
  options,
@@ -27,88 +28,102 @@ export const profileCardRenderer = ({
27
28
  renderingProfileCard = false;
28
29
  (_cleanupSelection = cleanupSelection) === null || _cleanupSelection === void 0 ? void 0 : _cleanupSelection();
29
30
  };
31
+ const renderProfileCardPopup = renderProfileCard => {
32
+ var _api$selection;
33
+ if (!(dom instanceof HTMLElement) || renderingProfileCard) {
34
+ return;
35
+ }
36
+ const referenceElement = dom;
37
+ referenceElement.setAttribute('aria-expanded', 'true');
38
+ renderingProfileCard = true;
39
+ portalProviderAPI.render(() => renderProfileCard(referenceElement), referenceElement, key);
40
+ cleanupSelection = api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.sharedState.onChange(({
41
+ nextSharedState
42
+ }) => {
43
+ const selection = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.selection;
44
+ if (selection instanceof NodeSelection ? selection.node === node : false) {
45
+ return;
46
+ }
47
+ removeProfileCard === null || removeProfileCard === void 0 ? void 0 : removeProfileCard();
48
+ });
49
+ };
50
+ const renderEditorProfileCard = () => {
51
+ renderProfileCardPopup(referenceElement => /*#__PURE__*/React.createElement(ProfileCardComponent, {
52
+ activeMention: node,
53
+ profilecardProvider: options === null || options === void 0 ? void 0 : options.profilecardProvider,
54
+ dom: referenceElement,
55
+ closeComponent: removeProfileCard
56
+ }));
57
+ };
58
+ const renderUserProfileCard = ({
59
+ userId,
60
+ cloudId,
61
+ renderUserMentionCard
62
+ }) => {
63
+ if (!renderUserMentionCard) {
64
+ return false;
65
+ }
66
+ renderProfileCardPopup(referenceElement => /*#__PURE__*/React.createElement(React.Fragment, null, renderUserMentionCard({
67
+ userId,
68
+ cloudId,
69
+ children: null,
70
+ referenceElement
71
+ })));
72
+ return true;
73
+ };
74
+ const navigateToProfile = (userId, cloudId) => {
75
+ if (navigatingToProfile) {
76
+ return;
77
+ }
78
+ navigatingToProfile = true;
79
+ const {
80
+ href,
81
+ target
82
+ } = navigateToTeamsApp({
83
+ type: 'USER',
84
+ payload: {
85
+ userId
86
+ },
87
+ cloudId
88
+ });
89
+ window.open(href, target, 'noopener,noreferrer');
90
+ };
91
+ const renderDefaultProfileCard = (userId, provider) => {
92
+ if (renderUserProfileCard({
93
+ userId,
94
+ cloudId: provider.cloudId,
95
+ renderUserMentionCard: provider.renderUserMentionCard
96
+ })) {
97
+ return;
98
+ }
99
+ navigateToProfile(userId, provider.cloudId);
100
+ };
30
101
  const listenerCleanup = bind(dom, {
31
102
  type: 'click',
32
103
  listener: () => {
33
104
  if (fg('people-teams_migrate-user-profile-card')) {
34
- var _node$attrs;
105
+ var _node$attrs, _options$profilecardP;
35
106
  const userId = (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.id;
36
- if (userId) {
37
- var _options$profilecardP;
38
- navigatingToProfile = false;
39
- options === null || options === void 0 ? void 0 : (_options$profilecardP = options.profilecardProvider) === null || _options$profilecardP === void 0 ? void 0 : _options$profilecardP.then(provider => {
40
- // If a consumer (e.g. Confluence) has supplied a custom profile card
41
- // renderer, render it into the portal instead of navigating away. The
42
- // consumer owns its own popup/positioning behavior - subsequent clicks
43
- // while the card is already open are no-ops here so the card's own
44
- // outside-click / toggle logic can take over.
45
- if (provider.renderUserMentionCard) {
46
- if (dom instanceof HTMLElement && !renderingProfileCard) {
47
- var _api$selection;
48
- dom.setAttribute('aria-expanded', 'true');
49
- renderingProfileCard = true;
50
- portalProviderAPI.render(() => {
51
- var _provider$renderUserM;
52
- return /*#__PURE__*/React.createElement(React.Fragment, null, (_provider$renderUserM = provider.renderUserMentionCard) === null || _provider$renderUserM === void 0 ? void 0 : _provider$renderUserM.call(provider, {
53
- userId,
54
- cloudId: provider.cloudId,
55
- children: null,
56
- referenceElement: dom
57
- }));
58
- }, dom, key);
59
- cleanupSelection = api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.sharedState.onChange(({
60
- nextSharedState
61
- }) => {
62
- const selection = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.selection;
63
- if (selection instanceof NodeSelection ? selection.node === node : false) {
64
- return;
65
- }
66
- removeProfileCard === null || removeProfileCard === void 0 ? void 0 : removeProfileCard();
67
- });
68
- }
69
- return;
70
- }
71
- if (navigatingToProfile) {
72
- return;
73
- }
74
- navigatingToProfile = true;
75
- const {
76
- href,
77
- target
78
- } = navigateToTeamsApp({
79
- type: 'USER',
80
- payload: {
81
- userId
82
- },
83
- cloudId: provider.cloudId
84
- });
85
- window.open(href, target, 'noopener,noreferrer');
86
- });
107
+ if (!userId) {
108
+ return;
87
109
  }
88
- return;
89
- }
90
- if (dom instanceof HTMLElement && options !== null && options !== void 0 && options.profilecardProvider && !renderingProfileCard) {
91
- var _api$selection2;
92
- dom.setAttribute('aria-expanded', 'true');
93
- renderingProfileCard = true;
94
- portalProviderAPI.render(() => /*#__PURE__*/React.createElement(ProfileCardComponent, {
95
- activeMention: node,
96
- profilecardProvider: options === null || options === void 0 ? void 0 : options.profilecardProvider,
97
- dom: dom,
98
- closeComponent: removeProfileCard
99
- }), dom, key);
100
- // If we change the selection we should also remove the profile card. The "deselectNode"
101
- // should usually catch this, but it's possible (ie. on triple click) for this not to be called
102
- // which means the profile card gets stuck open until you click + change selection
103
- cleanupSelection = api === null || api === void 0 ? void 0 : (_api$selection2 = api.selection) === null || _api$selection2 === void 0 ? void 0 : _api$selection2.sharedState.onChange(({
104
- nextSharedState
105
- }) => {
106
- const selection = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.selection;
107
- if (selection instanceof NodeSelection ? selection.node === node : false) {
110
+ navigatingToProfile = false;
111
+ options === null || options === void 0 ? void 0 : (_options$profilecardP = options.profilecardProvider) === null || _options$profilecardP === void 0 ? void 0 : _options$profilecardP.then(provider => {
112
+ var _node$attrs2;
113
+ if (!expVal('platform_editor_agent_mentions', 'isEnabled', false)) {
114
+ renderDefaultProfileCard(userId, provider);
108
115
  return;
109
116
  }
110
- removeProfileCard === null || removeProfileCard === void 0 ? void 0 : removeProfileCard();
117
+ if (isAgentMentionType((_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.userType)) {
118
+ renderEditorProfileCard();
119
+ } else {
120
+ renderDefaultProfileCard(userId, provider);
121
+ }
111
122
  });
123
+ return;
124
+ }
125
+ if (options !== null && options !== void 0 && options.profilecardProvider) {
126
+ renderEditorProfileCard();
112
127
  }
113
128
  }
114
129
  });
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -12,7 +12,7 @@ export const ACTIONS = {
12
12
  SET_PROVIDER: 'SET_PROVIDER'
13
13
  };
14
14
  const PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
15
- const PACKAGE_VERSION = "12.2.9";
15
+ const PACKAGE_VERSION = "12.2.10";
16
16
  const setProvider = provider => (state, dispatch) => {
17
17
  if (dispatch) {
18
18
  dispatch(state.tr.setMeta(mentionPluginKey, {
package/dist/es2019/ui/ProfileCardComponent.js CHANGED
@@ -2,11 +2,20 @@
2
2
  import "./ProfileCardComponent.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
- import { useEffect, useState, useMemo } from 'react';
5
+ import { useEffect, useMemo, useState } from 'react';
6
6
  import { bind } from 'bind-event-listener';
7
+ import Loadable from 'react-loadable';
7
8
  import { ProfileCardLazy } from '@atlaskit/profilecard/user';
8
9
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
10
+ import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
9
11
  import { Popup } from './PopperWrapper';
12
+ const AgentProfileCardResourcedLazy = Loadable({
13
+ loader: () => import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-mentions-agent-profile-card-resourced" */
14
+ '@atlaskit/profilecard/agent-profile-card-resourced').then(({
15
+ AgentProfileCardResourced
16
+ }) => AgentProfileCardResourced),
17
+ loading: () => null
18
+ });
10
19
  const styles = {
11
20
  loadingStyles: "_2rko12b0 _16qs130s"
12
21
  };
@@ -16,6 +25,7 @@ const LoadingWrapper = ({
16
25
  }) => isLoading ? /*#__PURE__*/React.createElement("div", {
17
26
  className: ax([styles.loadingStyles])
18
27
  }, children) : children;
28
+ export const isAgentMentionType = userType => userType === 'APP' || userType === 'AGENT';
19
29
  export const useProfileCardState = ({
20
30
  id,
21
31
  provider
@@ -61,6 +71,10 @@ export const useProfileCardState = ({
61
71
  hasError
62
72
  };
63
73
  };
74
+
75
+ /**
76
+ * Renders the profile card popup for an editor mention node.
77
+ */
64
78
  export function ProfileCardComponent({
65
79
  profilecardProvider,
66
80
  activeMention,
@@ -77,20 +91,9 @@ export function ProfileCardComponent({
77
91
  const {
78
92
  id,
79
93
  text,
80
- accessLevel
94
+ accessLevel,
95
+ userType
81
96
  } = (_ref = activeMention.attrs) !== null && _ref !== void 0 ? _ref : {};
82
- const actions = useMemo(() => provider === null || provider === void 0 ? void 0 : provider.getActions(id, text !== null && text !== void 0 ? text : '', accessLevel), [accessLevel, id, provider, text]);
83
- const {
84
- data,
85
- reportingLinesData,
86
- shouldShowGiveKudos,
87
- teamCentralBaseUrl,
88
- isLoading,
89
- hasError
90
- } = useProfileCardState({
91
- id,
92
- provider
93
- });
94
97
  useEffect(() => {
95
98
  return bind(window, {
96
99
  type: 'keydown',
@@ -101,9 +104,56 @@ export function ProfileCardComponent({
101
104
  }
102
105
  });
103
106
  });
107
+ if (!expVal('platform_editor_agent_mentions', 'isEnabled', false)) {
108
+ return /*#__PURE__*/React.createElement(Popup, {
109
+ referenceElement: dom
110
+ }, /*#__PURE__*/React.createElement(UserProfileCardContent, {
111
+ accessLevel: accessLevel,
112
+ id: id,
113
+ provider: provider,
114
+ text: text
115
+ }));
116
+ }
117
+ const isAgentMention = isAgentMentionType(userType);
104
118
  return /*#__PURE__*/React.createElement(Popup, {
105
119
  referenceElement: dom
106
- }, /*#__PURE__*/React.createElement(LoadingWrapper, {
120
+ }, isAgentMention && provider && id ? /*#__PURE__*/React.createElement(AgentProfileCardContent, {
121
+ accountId: id,
122
+ provider: provider
123
+ }) : /*#__PURE__*/React.createElement(UserProfileCardContent, {
124
+ accessLevel: accessLevel,
125
+ id: id,
126
+ provider: provider,
127
+ text: text
128
+ }));
129
+ }
130
+ const AgentProfileCardContent = ({
131
+ accountId,
132
+ provider
133
+ }) => /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, {
134
+ accountId: accountId,
135
+ cloudId: provider.cloudId,
136
+ resourceClient: provider.resourceClient
137
+ });
138
+ const UserProfileCardContent = ({
139
+ accessLevel,
140
+ id,
141
+ provider,
142
+ text
143
+ }) => {
144
+ const actions = useMemo(() => provider === null || provider === void 0 ? void 0 : provider.getActions(id, text !== null && text !== void 0 ? text : '', accessLevel), [accessLevel, id, provider, text]);
145
+ const {
146
+ data,
147
+ reportingLinesData,
148
+ shouldShowGiveKudos,
149
+ teamCentralBaseUrl,
150
+ isLoading,
151
+ hasError
152
+ } = useProfileCardState({
153
+ id,
154
+ provider
155
+ });
156
+ return /*#__PURE__*/React.createElement(LoadingWrapper, {
107
157
  isLoading: isLoading
108
158
  }, /*#__PURE__*/React.createElement(ProfileCardLazy, {
109
159
  avatarUrl: data === null || data === void 0 ? void 0 : data.avatarUrl,
@@ -128,5 +178,5 @@ export function ProfileCardComponent({
128
178
  isKudosEnabled: shouldShowGiveKudos,
129
179
  teamCentralBaseUrl: teamCentralBaseUrl,
130
180
  isRenderedInPortal: expValEquals('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true)
131
- })));
132
- }
181
+ }));
182
+ };
package/dist/esm/nodeviews/profileCardRenderer.js CHANGED
@@ -5,7 +5,8 @@ import uuid from 'uuid/v4';
5
5
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
6
6
  import { fg } from '@atlaskit/platform-feature-flags';
7
7
  import { navigateToTeamsApp } from '@atlaskit/teams-app-config/navigation';
8
- import { ProfileCardComponent } from '../ui/ProfileCardComponent';
8
+ import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
9
+ import { isAgentMentionType, ProfileCardComponent } from '../ui/ProfileCardComponent';
9
10
  export var profileCardRenderer = function profileCardRenderer(_ref) {
10
11
  var dom = _ref.dom,
11
12
  options = _ref.options,
@@ -26,87 +27,105 @@ export var profileCardRenderer = function profileCardRenderer(_ref) {
26
27
  renderingProfileCard = false;
27
28
  (_cleanupSelection = cleanupSelection) === null || _cleanupSelection === void 0 || _cleanupSelection();
28
29
  };
30
+ var renderProfileCardPopup = function renderProfileCardPopup(renderProfileCard) {
31
+ var _api$selection;
32
+ if (!(dom instanceof HTMLElement) || renderingProfileCard) {
33
+ return;
34
+ }
35
+ var referenceElement = dom;
36
+ referenceElement.setAttribute('aria-expanded', 'true');
37
+ renderingProfileCard = true;
38
+ portalProviderAPI.render(function () {
39
+ return renderProfileCard(referenceElement);
40
+ }, referenceElement, key);
41
+ cleanupSelection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.sharedState.onChange(function (_ref2) {
42
+ var nextSharedState = _ref2.nextSharedState;
43
+ var selection = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.selection;
44
+ if (selection instanceof NodeSelection ? selection.node === node : false) {
45
+ return;
46
+ }
47
+ removeProfileCard === null || removeProfileCard === void 0 || removeProfileCard();
48
+ });
49
+ };
50
+ var renderEditorProfileCard = function renderEditorProfileCard() {
51
+ renderProfileCardPopup(function (referenceElement) {
52
+ return /*#__PURE__*/React.createElement(ProfileCardComponent, {
53
+ activeMention: node,
54
+ profilecardProvider: options === null || options === void 0 ? void 0 : options.profilecardProvider,
55
+ dom: referenceElement,
56
+ closeComponent: removeProfileCard
57
+ });
58
+ });
59
+ };
60
+ var renderUserProfileCard = function renderUserProfileCard(_ref3) {
61
+ var userId = _ref3.userId,
62
+ cloudId = _ref3.cloudId,
63
+ renderUserMentionCard = _ref3.renderUserMentionCard;
64
+ if (!renderUserMentionCard) {
65
+ return false;
66
+ }
67
+ renderProfileCardPopup(function (referenceElement) {
68
+ return /*#__PURE__*/React.createElement(React.Fragment, null, renderUserMentionCard({
69
+ userId: userId,
70
+ cloudId: cloudId,
71
+ children: null,
72
+ referenceElement: referenceElement
73
+ }));
74
+ });
75
+ return true;
76
+ };
77
+ var navigateToProfile = function navigateToProfile(userId, cloudId) {
78
+ if (navigatingToProfile) {
79
+ return;
80
+ }
81
+ navigatingToProfile = true;
82
+ var _navigateToTeamsApp = navigateToTeamsApp({
83
+ type: 'USER',
84
+ payload: {
85
+ userId: userId
86
+ },
87
+ cloudId: cloudId
88
+ }),
89
+ href = _navigateToTeamsApp.href,
90
+ target = _navigateToTeamsApp.target;
91
+ window.open(href, target, 'noopener,noreferrer');
92
+ };
93
+ var renderDefaultProfileCard = function renderDefaultProfileCard(userId, provider) {
94
+ if (renderUserProfileCard({
95
+ userId: userId,
96
+ cloudId: provider.cloudId,
97
+ renderUserMentionCard: provider.renderUserMentionCard
98
+ })) {
99
+ return;
100
+ }
101
+ navigateToProfile(userId, provider.cloudId);
102
+ };
29
103
  var listenerCleanup = bind(dom, {
30
104
  type: 'click',
31
105
  listener: function listener() {
32
106
  if (fg('people-teams_migrate-user-profile-card')) {
33
- var _node$attrs;
107
+ var _node$attrs, _options$profilecardP;
34
108
  var userId = (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.id;
35
- if (userId) {
36
- var _options$profilecardP;
37
- navigatingToProfile = false;
38
- options === null || options === void 0 || (_options$profilecardP = options.profilecardProvider) === null || _options$profilecardP === void 0 || _options$profilecardP.then(function (provider) {
39
- // If a consumer (e.g. Confluence) has supplied a custom profile card
40
- // renderer, render it into the portal instead of navigating away. The
41
- // consumer owns its own popup/positioning behavior - subsequent clicks
42
- // while the card is already open are no-ops here so the card's own
43
- // outside-click / toggle logic can take over.
44
- if (provider.renderUserMentionCard) {
45
- if (dom instanceof HTMLElement && !renderingProfileCard) {
46
- var _api$selection;
47
- dom.setAttribute('aria-expanded', 'true');
48
- renderingProfileCard = true;
49
- portalProviderAPI.render(function () {
50
- var _provider$renderUserM;
51
- return /*#__PURE__*/React.createElement(React.Fragment, null, (_provider$renderUserM = provider.renderUserMentionCard) === null || _provider$renderUserM === void 0 ? void 0 : _provider$renderUserM.call(provider, {
52
- userId: userId,
53
- cloudId: provider.cloudId,
54
- children: null,
55
- referenceElement: dom
56
- }));
57
- }, dom, key);
58
- cleanupSelection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.sharedState.onChange(function (_ref2) {
59
- var nextSharedState = _ref2.nextSharedState;
60
- var selection = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.selection;
61
- if (selection instanceof NodeSelection ? selection.node === node : false) {
62
- return;
63
- }
64
- removeProfileCard === null || removeProfileCard === void 0 || removeProfileCard();
65
- });
66
- }
67
- return;
68
- }
69
- if (navigatingToProfile) {
70
- return;
71
- }
72
- navigatingToProfile = true;
73
- var _navigateToTeamsApp = navigateToTeamsApp({
74
- type: 'USER',
75
- payload: {
76
- userId: userId
77
- },
78
- cloudId: provider.cloudId
79
- }),
80
- href = _navigateToTeamsApp.href,
81
- target = _navigateToTeamsApp.target;
82
- window.open(href, target, 'noopener,noreferrer');
83
- });
109
+ if (!userId) {
110
+ return;
84
111
  }
85
- return;
86
- }
87
- if (dom instanceof HTMLElement && options !== null && options !== void 0 && options.profilecardProvider && !renderingProfileCard) {
88
- var _api$selection2;
89
- dom.setAttribute('aria-expanded', 'true');
90
- renderingProfileCard = true;
91
- portalProviderAPI.render(function () {
92
- return /*#__PURE__*/React.createElement(ProfileCardComponent, {
93
- activeMention: node,
94
- profilecardProvider: options === null || options === void 0 ? void 0 : options.profilecardProvider,
95
- dom: dom,
96
- closeComponent: removeProfileCard
97
- });
98
- }, dom, key);
99
- // If we change the selection we should also remove the profile card. The "deselectNode"
100
- // should usually catch this, but it's possible (ie. on triple click) for this not to be called
101
- // which means the profile card gets stuck open until you click + change selection
102
- cleanupSelection = api === null || api === void 0 || (_api$selection2 = api.selection) === null || _api$selection2 === void 0 ? void 0 : _api$selection2.sharedState.onChange(function (_ref3) {
103
- var nextSharedState = _ref3.nextSharedState;
104
- var selection = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.selection;
105
- if (selection instanceof NodeSelection ? selection.node === node : false) {
112
+ navigatingToProfile = false;
113
+ options === null || options === void 0 || (_options$profilecardP = options.profilecardProvider) === null || _options$profilecardP === void 0 || _options$profilecardP.then(function (provider) {
114
+ var _node$attrs2;
115
+ if (!expVal('platform_editor_agent_mentions', 'isEnabled', false)) {
116
+ renderDefaultProfileCard(userId, provider);
106
117
  return;
107
118
  }
108
- removeProfileCard === null || removeProfileCard === void 0 || removeProfileCard();
119
+ if (isAgentMentionType((_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.userType)) {
120
+ renderEditorProfileCard();
121
+ } else {
122
+ renderDefaultProfileCard(userId, provider);
123
+ }
109
124
  });
125
+ return;
126
+ }
127
+ if (options !== null && options !== void 0 && options.profilecardProvider) {
128
+ renderEditorProfileCard();
110
129
  }
111
130
  }
112
131
  });
package/dist/esm/pm-plugins/main.js CHANGED
@@ -15,7 +15,7 @@ export var ACTIONS = {
15
15
  SET_PROVIDER: 'SET_PROVIDER'
16
16
  };
17
17
  var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
18
- var PACKAGE_VERSION = "12.2.9";
18
+ var PACKAGE_VERSION = "12.2.10";
19
19
  var setProvider = function setProvider(provider) {
20
20
  return function (state, dispatch) {
21
21
  if (dispatch) {
package/dist/esm/ui/ProfileCardComponent.js CHANGED
@@ -5,24 +5,41 @@ import "./ProfileCardComponent.compiled.css";
5
5
  import * as React from 'react';
6
6
  import { ax, ix } from "@compiled/react/runtime";
7
7
  import _regeneratorRuntime from "@babel/runtime/regenerator";
8
- import { useEffect, useState, useMemo } from 'react';
8
+ import { useEffect, useMemo, useState } from 'react';
9
9
  import { bind } from 'bind-event-listener';
10
+ import Loadable from 'react-loadable';
10
11
  import { ProfileCardLazy } from '@atlaskit/profilecard/user';
11
12
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
13
+ import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
12
14
  import { Popup } from './PopperWrapper';
15
+ var AgentProfileCardResourcedLazy = Loadable({
16
+ loader: function loader() {
17
+ return import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-mentions-agent-profile-card-resourced" */
18
+ '@atlaskit/profilecard/agent-profile-card-resourced').then(function (_ref) {
19
+ var AgentProfileCardResourced = _ref.AgentProfileCardResourced;
20
+ return AgentProfileCardResourced;
21
+ });
22
+ },
23
+ loading: function loading() {
24
+ return null;
25
+ }
26
+ });
13
27
  var styles = {
14
28
  loadingStyles: "_2rko12b0 _16qs130s"
15
29
  };
16
- var LoadingWrapper = function LoadingWrapper(_ref) {
17
- var children = _ref.children,
18
- isLoading = _ref.isLoading;
30
+ var LoadingWrapper = function LoadingWrapper(_ref2) {
31
+ var children = _ref2.children,
32
+ isLoading = _ref2.isLoading;
19
33
  return isLoading ? /*#__PURE__*/React.createElement("div", {
20
34
  className: ax([styles.loadingStyles])
21
35
  }, children) : children;
22
36
  };
23
- export var useProfileCardState = function useProfileCardState(_ref2) {
24
- var id = _ref2.id,
25
- provider = _ref2.provider;
37
+ export var isAgentMentionType = function isAgentMentionType(userType) {
38
+ return userType === 'APP' || userType === 'AGENT';
39
+ };
40
+ export var useProfileCardState = function useProfileCardState(_ref3) {
41
+ var id = _ref3.id,
42
+ provider = _ref3.provider;
26
43
  var _useState = useState(),
27
44
  _useState2 = _slicedToArray(_useState, 2),
28
45
  data = _useState2[0],
@@ -51,7 +68,7 @@ export var useProfileCardState = function useProfileCardState(_ref2) {
51
68
  // From: packages/people-and-teams/profilecard/src/components/User/ProfileCardTrigger.tsx
52
69
  useEffect(function () {
53
70
  var fetchData = /*#__PURE__*/function () {
54
- var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
71
+ var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
55
72
  var _yield$Promise$all, _yield$Promise$all2, _data, reportingLines, shouldGiveKudos, _teamCentralBaseUrl, _t;
56
73
  return _regeneratorRuntime.wrap(function (_context) {
57
74
  while (1) switch (_context.prev = _context.next) {
@@ -98,7 +115,7 @@ export var useProfileCardState = function useProfileCardState(_ref2) {
98
115
  }, _callee, null, [[2, 4, 5, 6]]);
99
116
  }));
100
117
  return function fetchData() {
101
- return _ref3.apply(this, arguments);
118
+ return _ref4.apply(this, arguments);
102
119
  };
103
120
  }();
104
121
  fetchData();
@@ -112,12 +129,16 @@ export var useProfileCardState = function useProfileCardState(_ref2) {
112
129
  hasError: hasError
113
130
  };
114
131
  };
115
- export function ProfileCardComponent(_ref4) {
116
- var _ref6;
117
- var profilecardProvider = _ref4.profilecardProvider,
118
- activeMention = _ref4.activeMention,
119
- dom = _ref4.dom,
120
- closeComponent = _ref4.closeComponent;
132
+
133
+ /**
134
+ * Renders the profile card popup for an editor mention node.
135
+ */
136
+ export function ProfileCardComponent(_ref5) {
137
+ var _ref7;
138
+ var profilecardProvider = _ref5.profilecardProvider,
139
+ activeMention = _ref5.activeMention,
140
+ dom = _ref5.dom,
141
+ closeComponent = _ref5.closeComponent;
121
142
  var _useState11 = useState(undefined),
122
143
  _useState12 = _slicedToArray(_useState11, 2),
123
144
  provider = _useState12[0],
@@ -127,10 +148,58 @@ export function ProfileCardComponent(_ref4) {
127
148
  setProvider(p);
128
149
  });
129
150
  }, [profilecardProvider]);
130
- var _ref5 = (_ref6 = activeMention.attrs) !== null && _ref6 !== void 0 ? _ref6 : {},
131
- id = _ref5.id,
132
- text = _ref5.text,
133
- accessLevel = _ref5.accessLevel;
151
+ var _ref6 = (_ref7 = activeMention.attrs) !== null && _ref7 !== void 0 ? _ref7 : {},
152
+ id = _ref6.id,
153
+ text = _ref6.text,
154
+ accessLevel = _ref6.accessLevel,
155
+ userType = _ref6.userType;
156
+ useEffect(function () {
157
+ return bind(window, {
158
+ type: 'keydown',
159
+ listener: function listener(e) {
160
+ if (e.key === 'Escape') {
161
+ closeComponent();
162
+ }
163
+ }
164
+ });
165
+ });
166
+ if (!expVal('platform_editor_agent_mentions', 'isEnabled', false)) {
167
+ return /*#__PURE__*/React.createElement(Popup, {
168
+ referenceElement: dom
169
+ }, /*#__PURE__*/React.createElement(UserProfileCardContent, {
170
+ accessLevel: accessLevel,
171
+ id: id,
172
+ provider: provider,
173
+ text: text
174
+ }));
175
+ }
176
+ var isAgentMention = isAgentMentionType(userType);
177
+ return /*#__PURE__*/React.createElement(Popup, {
178
+ referenceElement: dom
179
+ }, isAgentMention && provider && id ? /*#__PURE__*/React.createElement(AgentProfileCardContent, {
180
+ accountId: id,
181
+ provider: provider
182
+ }) : /*#__PURE__*/React.createElement(UserProfileCardContent, {
183
+ accessLevel: accessLevel,
184
+ id: id,
185
+ provider: provider,
186
+ text: text
187
+ }));
188
+ }
189
+ var AgentProfileCardContent = function AgentProfileCardContent(_ref8) {
190
+ var accountId = _ref8.accountId,
191
+ provider = _ref8.provider;
192
+ return /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, {
193
+ accountId: accountId,
194
+ cloudId: provider.cloudId,
195
+ resourceClient: provider.resourceClient
196
+ });
197
+ };
198
+ var UserProfileCardContent = function UserProfileCardContent(_ref9) {
199
+ var accessLevel = _ref9.accessLevel,
200
+ id = _ref9.id,
201
+ provider = _ref9.provider,
202
+ text = _ref9.text;
134
203
  var actions = useMemo(function () {
135
204
  return provider === null || provider === void 0 ? void 0 : provider.getActions(id, text !== null && text !== void 0 ? text : '', accessLevel);
136
205
  }, [accessLevel, id, provider, text]);
@@ -144,19 +213,7 @@ export function ProfileCardComponent(_ref4) {
144
213
  teamCentralBaseUrl = _useProfileCardState.teamCentralBaseUrl,
145
214
  isLoading = _useProfileCardState.isLoading,
146
215
  hasError = _useProfileCardState.hasError;
147
- useEffect(function () {
148
- return bind(window, {
149
- type: 'keydown',
150
- listener: function listener(e) {
151
- if (e.key === 'Escape') {
152
- closeComponent();
153
- }
154
- }
155
- });
156
- });
157
- return /*#__PURE__*/React.createElement(Popup, {
158
- referenceElement: dom
159
- }, /*#__PURE__*/React.createElement(LoadingWrapper, {
216
+ return /*#__PURE__*/React.createElement(LoadingWrapper, {
160
217
  isLoading: isLoading
161
218
  }, /*#__PURE__*/React.createElement(ProfileCardLazy, {
162
219
  avatarUrl: data === null || data === void 0 ? void 0 : data.avatarUrl,
@@ -181,5 +238,5 @@ export function ProfileCardComponent(_ref4) {
181
238
  isKudosEnabled: shouldShowGiveKudos,
182
239
  teamCentralBaseUrl: teamCentralBaseUrl,
183
240
  isRenderedInPortal: expValEquals('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true)
184
- })));
185
- }
241
+ }));
242
+ };
package/dist/types/ui/ProfileCardComponent.d.ts CHANGED
@@ -5,6 +5,7 @@ interface ProfileCardStateProps {
5
5
  id: string | undefined;
6
6
  provider: ProfilecardProvider | undefined;
7
7
  }
8
+ export declare const isAgentMentionType: (userType: unknown) => boolean;
8
9
  export declare const useProfileCardState: ({ id, provider, }: ProfileCardStateProps) => {
9
10
  data: ProfileCardClientData | undefined;
10
11
  hasError: boolean;
@@ -13,6 +14,9 @@ export declare const useProfileCardState: ({ id, provider, }: ProfileCardStatePr
13
14
  shouldShowGiveKudos: boolean;
14
15
  teamCentralBaseUrl: string | undefined;
15
16
  };
17
+ /**
18
+ * Renders the profile card popup for an editor mention node.
19
+ */
16
20
  export declare function ProfileCardComponent({ profilecardProvider, activeMention, dom, closeComponent, }: {
17
21
  activeMention: PMNode;
18
22
  closeComponent: () => void;
package/dist/types-ts4.5/ui/ProfileCardComponent.d.ts CHANGED
@@ -5,6 +5,7 @@ interface ProfileCardStateProps {
5
5
  id: string | undefined;
6
6
  provider: ProfilecardProvider | undefined;
7
7
  }
8
+ export declare const isAgentMentionType: (userType: unknown) => boolean;
8
9
  export declare const useProfileCardState: ({ id, provider, }: ProfileCardStateProps) => {
9
10
  data: ProfileCardClientData | undefined;
10
11
  hasError: boolean;
@@ -13,6 +14,9 @@ export declare const useProfileCardState: ({ id, provider, }: ProfileCardStatePr
13
14
  shouldShowGiveKudos: boolean;
14
15
  teamCentralBaseUrl: string | undefined;
15
16
  };
17
+ /**
18
+ * Renders the profile card popup for an editor mention node.
19
+ */
16
20
  export declare function ProfileCardComponent({ profilecardProvider, activeMention, dom, closeComponent, }: {
17
21
  activeMention: PMNode;
18
22
  closeComponent: () => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-mentions",
3
- "version": "12.2.10",
3
+ "version": "12.2.11",
4
4
  "description": "Mentions plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -55,6 +55,7 @@
55
55
  "@compiled/react": "^0.20.0",
56
56
  "bind-event-listener": "^3.0.0",
57
57
  "focus-trap": "^2.4.5",
58
+ "react-loadable": "^5.1.0",
58
59
  "uuid": "^3.1.0"
59
60
  },
60
61
  "peerDependencies": {