@atlaskit/editor-plugin-mentions 20.0.5 → 20.1.0

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 (8) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/pm-plugins/main.js +1 -1
  3. package/dist/cjs/ui/type-ahead/MentionItemWithProfileCard.js +58 -14
  4. package/dist/es2019/pm-plugins/main.js +1 -1
  5. package/dist/es2019/ui/type-ahead/MentionItemWithProfileCard.js +46 -4
  6. package/dist/esm/pm-plugins/main.js +1 -1
  7. package/dist/esm/ui/type-ahead/MentionItemWithProfileCard.js +58 -14
  8. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-mentions
2
2
 
3
+ ## 20.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`276b5526e198a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/276b5526e198a) -
8
+ Show the user profile card on hover in the mentions typeahead, behind the
9
+ `platform_editor_mention_typeahead_user_profilecard` experiment
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 20.0.5
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -43,7 +43,7 @@ var ACTIONS = exports.ACTIONS = {
43
43
  CLEAR_PENDING_PASTED_AGENT_MENTION: 'CLEAR_PENDING_PASTED_AGENT_MENTION'
44
44
  };
45
45
  var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
46
- var PACKAGE_VERSION = "20.0.4";
46
+ var PACKAGE_VERSION = "20.0.5";
47
47
  var setProvider = function setProvider(provider) {
48
48
  return function (state, dispatch) {
49
49
  if (dispatch) {
package/dist/cjs/ui/type-ahead/MentionItemWithProfileCard.js CHANGED
@@ -38,20 +38,58 @@ function getScrollbarWidth(row) {
38
38
  }
39
39
  return 0;
40
40
  }
41
+
42
+ /**
43
+ * Renders the new (relay) user profile card for a mention typeahead row, anchored to the row and
44
+ * flipped left when there's no room on the right
45
+ */
46
+ function UserTypeaheadProfileCard(_ref) {
47
+ var profilecardProvider = _ref.profilecardProvider,
48
+ userId = _ref.userId,
49
+ referenceElement = _ref.referenceElement;
50
+ var _useState = (0, _react.useState)(undefined),
51
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
52
+ provider = _useState2[0],
53
+ setProvider = _useState2[1];
54
+ (0, _react.useEffect)(function () {
55
+ var active = true;
56
+ void profilecardProvider.then(function (resolved) {
57
+ if (active) {
58
+ setProvider(resolved);
59
+ }
60
+ }).catch(function () {
61
+ // provider failed to resolve, card stays hidden
62
+ });
63
+ return function () {
64
+ active = false;
65
+ };
66
+ }, [profilecardProvider]);
67
+ if (!userId || !(provider !== null && provider !== void 0 && provider.renderUserMentionCard)) {
68
+ return null;
69
+ }
70
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, provider.renderUserMentionCard({
71
+ userId: userId,
72
+ cloudId: provider.cloudId,
73
+ children: null,
74
+ referenceElement: referenceElement,
75
+ placement: 'right',
76
+ isReduced: true
77
+ }));
78
+ }
41
79
  /**
42
80
  * Renders a mentions typeahead row that shows a (reduced) profile card
43
81
  * when hovered
44
82
  */
45
- function MentionItemWithProfileCard(_ref) {
46
- var mention = _ref.mention,
47
- selected = _ref.selected,
48
- onSelection = _ref.onSelection,
49
- height = _ref.height,
50
- profilecardProvider = _ref.profilecardProvider;
51
- var _useState = (0, _react.useState)(null),
52
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
53
- referenceElement = _useState2[0],
54
- setReferenceElement = _useState2[1];
83
+ function MentionItemWithProfileCard(_ref2) {
84
+ var mention = _ref2.mention,
85
+ selected = _ref2.selected,
86
+ onSelection = _ref2.onSelection,
87
+ height = _ref2.height,
88
+ profilecardProvider = _ref2.profilecardProvider;
89
+ var _useState3 = (0, _react.useState)(null),
90
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
91
+ referenceElement = _useState4[0],
92
+ setReferenceElement = _useState4[1];
55
93
  var showTimerRef = (0, _react.useRef)();
56
94
  var hideTimerRef = (0, _react.useRef)();
57
95
  var clearTimers = (0, _react.useCallback)(function () {
@@ -63,8 +101,10 @@ function MentionItemWithProfileCard(_ref) {
63
101
  }, [clearTimers]);
64
102
  var isAgent = (0, _utils.isAgentMention)(mention);
65
103
  var handleMouseEnter = (0, _react.useCallback)(function (_mention, event) {
66
- // Currently showing profile cards for agents only
67
- if (mention.isPlaceholder || !mention.id || !profilecardProvider || !isAgent) {
104
+ if (mention.isPlaceholder || !mention.id || !profilecardProvider) {
105
+ return;
106
+ }
107
+ if (!isAgent && !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_typeahead_user_profilecard')) {
68
108
  return;
69
109
  }
70
110
  var rowElement = event === null || event === void 0 ? void 0 : event.currentTarget;
@@ -138,7 +178,7 @@ function MentionItemWithProfileCard(_ref) {
138
178
  onMouseEnter: handleMouseEnter,
139
179
  onSelection: onSelection,
140
180
  height: height
141
- }), referenceElement && profilecardProvider && /*#__PURE__*/_react.default.createElement(_ProfileCardComponent.ProfileCardComponent, {
181
+ }), referenceElement && profilecardProvider && (isAgent ? /*#__PURE__*/_react.default.createElement(_ProfileCardComponent.ProfileCardComponent, {
142
182
  activeMention: activeMention,
143
183
  profilecardProvider: profilecardProvider,
144
184
  dom: referenceElement,
@@ -147,5 +187,9 @@ function MentionItemWithProfileCard(_ref) {
147
187
  offset: offset,
148
188
  disableFocusTrap: true,
149
189
  hideActions: true
150
- }));
190
+ }) : /*#__PURE__*/_react.default.createElement(UserTypeaheadProfileCard, {
191
+ profilecardProvider: profilecardProvider,
192
+ userId: mention.id,
193
+ referenceElement: referenceElement
194
+ })));
151
195
  }
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -32,7 +32,7 @@ export const ACTIONS = {
32
32
  CLEAR_PENDING_PASTED_AGENT_MENTION: 'CLEAR_PENDING_PASTED_AGENT_MENTION'
33
33
  };
34
34
  const PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
35
- const PACKAGE_VERSION = "20.0.4";
35
+ const PACKAGE_VERSION = "20.0.5";
36
36
  const setProvider = provider => (state, dispatch) => {
37
37
  if (dispatch) {
38
38
  dispatch(state.tr.setMeta(mentionPluginKey, {
package/dist/es2019/ui/type-ahead/MentionItemWithProfileCard.js CHANGED
@@ -29,6 +29,42 @@ function getScrollbarWidth(row) {
29
29
  }
30
30
  return 0;
31
31
  }
32
+
33
+ /**
34
+ * Renders the new (relay) user profile card for a mention typeahead row, anchored to the row and
35
+ * flipped left when there's no room on the right
36
+ */
37
+ function UserTypeaheadProfileCard({
38
+ profilecardProvider,
39
+ userId,
40
+ referenceElement
41
+ }) {
42
+ const [provider, setProvider] = useState(undefined);
43
+ useEffect(() => {
44
+ let active = true;
45
+ void profilecardProvider.then(resolved => {
46
+ if (active) {
47
+ setProvider(resolved);
48
+ }
49
+ }).catch(() => {
50
+ // provider failed to resolve, card stays hidden
51
+ });
52
+ return () => {
53
+ active = false;
54
+ };
55
+ }, [profilecardProvider]);
56
+ if (!userId || !(provider !== null && provider !== void 0 && provider.renderUserMentionCard)) {
57
+ return null;
58
+ }
59
+ return /*#__PURE__*/React.createElement(React.Fragment, null, provider.renderUserMentionCard({
60
+ userId,
61
+ cloudId: provider.cloudId,
62
+ children: null,
63
+ referenceElement,
64
+ placement: 'right',
65
+ isReduced: true
66
+ }));
67
+ }
32
68
  /**
33
69
  * Renders a mentions typeahead row that shows a (reduced) profile card
34
70
  * when hovered
@@ -50,8 +86,10 @@ export function MentionItemWithProfileCard({
50
86
  useEffect(() => clearTimers, [clearTimers]);
51
87
  const isAgent = isAgentMention(mention);
52
88
  const handleMouseEnter = useCallback((_mention, event) => {
53
- // Currently showing profile cards for agents only
54
- if (mention.isPlaceholder || !mention.id || !profilecardProvider || !isAgent) {
89
+ if (mention.isPlaceholder || !mention.id || !profilecardProvider) {
90
+ return;
91
+ }
92
+ if (!isAgent && !isExperimentEnabled('platform_editor_mention_typeahead_user_profilecard')) {
55
93
  return;
56
94
  }
57
95
  const rowElement = event === null || event === void 0 ? void 0 : event.currentTarget;
@@ -123,7 +161,7 @@ export function MentionItemWithProfileCard({
123
161
  onMouseEnter: handleMouseEnter,
124
162
  onSelection: onSelection,
125
163
  height: height
126
- }), referenceElement && profilecardProvider && /*#__PURE__*/React.createElement(ProfileCardComponent, {
164
+ }), referenceElement && profilecardProvider && (isAgent ? /*#__PURE__*/React.createElement(ProfileCardComponent, {
127
165
  activeMention: activeMention,
128
166
  profilecardProvider: profilecardProvider,
129
167
  dom: referenceElement,
@@ -132,5 +170,9 @@ export function MentionItemWithProfileCard({
132
170
  offset: offset,
133
171
  disableFocusTrap: true,
134
172
  hideActions: true
135
- }));
173
+ }) : /*#__PURE__*/React.createElement(UserTypeaheadProfileCard, {
174
+ profilecardProvider: profilecardProvider,
175
+ userId: mention.id,
176
+ referenceElement: referenceElement
177
+ })));
136
178
  }
package/dist/esm/pm-plugins/main.js CHANGED
@@ -35,7 +35,7 @@ export var ACTIONS = {
35
35
  CLEAR_PENDING_PASTED_AGENT_MENTION: 'CLEAR_PENDING_PASTED_AGENT_MENTION'
36
36
  };
37
37
  var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
38
- var PACKAGE_VERSION = "20.0.4";
38
+ var PACKAGE_VERSION = "20.0.5";
39
39
  var setProvider = function setProvider(provider) {
40
40
  return function (state, dispatch) {
41
41
  if (dispatch) {
package/dist/esm/ui/type-ahead/MentionItemWithProfileCard.js CHANGED
@@ -30,20 +30,58 @@ function getScrollbarWidth(row) {
30
30
  }
31
31
  return 0;
32
32
  }
33
+
34
+ /**
35
+ * Renders the new (relay) user profile card for a mention typeahead row, anchored to the row and
36
+ * flipped left when there's no room on the right
37
+ */
38
+ function UserTypeaheadProfileCard(_ref) {
39
+ var profilecardProvider = _ref.profilecardProvider,
40
+ userId = _ref.userId,
41
+ referenceElement = _ref.referenceElement;
42
+ var _useState = useState(undefined),
43
+ _useState2 = _slicedToArray(_useState, 2),
44
+ provider = _useState2[0],
45
+ setProvider = _useState2[1];
46
+ useEffect(function () {
47
+ var active = true;
48
+ void profilecardProvider.then(function (resolved) {
49
+ if (active) {
50
+ setProvider(resolved);
51
+ }
52
+ }).catch(function () {
53
+ // provider failed to resolve, card stays hidden
54
+ });
55
+ return function () {
56
+ active = false;
57
+ };
58
+ }, [profilecardProvider]);
59
+ if (!userId || !(provider !== null && provider !== void 0 && provider.renderUserMentionCard)) {
60
+ return null;
61
+ }
62
+ return /*#__PURE__*/React.createElement(React.Fragment, null, provider.renderUserMentionCard({
63
+ userId: userId,
64
+ cloudId: provider.cloudId,
65
+ children: null,
66
+ referenceElement: referenceElement,
67
+ placement: 'right',
68
+ isReduced: true
69
+ }));
70
+ }
33
71
  /**
34
72
  * Renders a mentions typeahead row that shows a (reduced) profile card
35
73
  * when hovered
36
74
  */
37
- export function MentionItemWithProfileCard(_ref) {
38
- var mention = _ref.mention,
39
- selected = _ref.selected,
40
- onSelection = _ref.onSelection,
41
- height = _ref.height,
42
- profilecardProvider = _ref.profilecardProvider;
43
- var _useState = useState(null),
44
- _useState2 = _slicedToArray(_useState, 2),
45
- referenceElement = _useState2[0],
46
- setReferenceElement = _useState2[1];
75
+ export function MentionItemWithProfileCard(_ref2) {
76
+ var mention = _ref2.mention,
77
+ selected = _ref2.selected,
78
+ onSelection = _ref2.onSelection,
79
+ height = _ref2.height,
80
+ profilecardProvider = _ref2.profilecardProvider;
81
+ var _useState3 = useState(null),
82
+ _useState4 = _slicedToArray(_useState3, 2),
83
+ referenceElement = _useState4[0],
84
+ setReferenceElement = _useState4[1];
47
85
  var showTimerRef = useRef();
48
86
  var hideTimerRef = useRef();
49
87
  var clearTimers = useCallback(function () {
@@ -55,8 +93,10 @@ export function MentionItemWithProfileCard(_ref) {
55
93
  }, [clearTimers]);
56
94
  var isAgent = isAgentMention(mention);
57
95
  var handleMouseEnter = useCallback(function (_mention, event) {
58
- // Currently showing profile cards for agents only
59
- if (mention.isPlaceholder || !mention.id || !profilecardProvider || !isAgent) {
96
+ if (mention.isPlaceholder || !mention.id || !profilecardProvider) {
97
+ return;
98
+ }
99
+ if (!isAgent && !isExperimentEnabled('platform_editor_mention_typeahead_user_profilecard')) {
60
100
  return;
61
101
  }
62
102
  var rowElement = event === null || event === void 0 ? void 0 : event.currentTarget;
@@ -130,7 +170,7 @@ export function MentionItemWithProfileCard(_ref) {
130
170
  onMouseEnter: handleMouseEnter,
131
171
  onSelection: onSelection,
132
172
  height: height
133
- }), referenceElement && profilecardProvider && /*#__PURE__*/React.createElement(ProfileCardComponent, {
173
+ }), referenceElement && profilecardProvider && (isAgent ? /*#__PURE__*/React.createElement(ProfileCardComponent, {
134
174
  activeMention: activeMention,
135
175
  profilecardProvider: profilecardProvider,
136
176
  dom: referenceElement,
@@ -139,5 +179,9 @@ export function MentionItemWithProfileCard(_ref) {
139
179
  offset: offset,
140
180
  disableFocusTrap: true,
141
181
  hideActions: true
142
- }));
182
+ }) : /*#__PURE__*/React.createElement(UserTypeaheadProfileCard, {
183
+ profilecardProvider: profilecardProvider,
184
+ userId: mention.id,
185
+ referenceElement: referenceElement
186
+ })));
143
187
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-mentions",
3
- "version": "20.0.5",
3
+ "version": "20.1.0",
4
4
  "description": "Mentions plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -31,7 +31,7 @@
31
31
  "@atlaskit/editor-plugin-type-ahead": "^19.0.0",
32
32
  "@atlaskit/editor-prosemirror": "^8.0.0",
33
33
  "@atlaskit/feature-gate-js-client": "^6.0.0",
34
- "@atlaskit/icon": "^37.6.0",
34
+ "@atlaskit/icon": "^37.7.0",
35
35
  "@atlaskit/insm": "^3.0.0",
36
36
  "@atlaskit/link": "^5.1.0",
37
37
  "@atlaskit/lozenge": "^15.4.0",
@@ -43,11 +43,11 @@
43
43
  "@atlaskit/popup": "^6.3.0",
44
44
  "@atlaskit/portal": "^6.4.0",
45
45
  "@atlaskit/primitives": "^22.5.0",
46
- "@atlaskit/profilecard": "^26.23.0",
46
+ "@atlaskit/profilecard": "^26.24.0",
47
47
  "@atlaskit/section-message": "^10.2.0",
48
48
  "@atlaskit/teams-app-config": "^3.1.0",
49
49
  "@atlaskit/theme": "^28.2.0",
50
- "@atlaskit/tmp-editor-statsig": "^193.0.0",
50
+ "@atlaskit/tmp-editor-statsig": "^194.0.0",
51
51
  "@atlaskit/tokens": "^16.12.0",
52
52
  "@atlaskit/tooltip": "^24.3.0",
53
53
  "@atlaskit/user-picker": "^13.13.0",
@@ -59,7 +59,7 @@
59
59
  "uuid": "^11.1.1"
60
60
  },
61
61
  "peerDependencies": {
62
- "@atlaskit/editor-common": "^122.3.0",
62
+ "@atlaskit/editor-common": "^122.6.0",
63
63
  "react": "^18.2.0 || ^19.2.0",
64
64
  "react-dom": "^18.2.0 || ^19.2.0",
65
65
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"