@atlaskit/editor-plugin-mentions 16.0.2 → 16.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.
- package/CHANGELOG.md +17 -0
- package/anchored-popup/package.json +10 -0
- package/dist/cjs/entry-points/anchored-popup.js +12 -0
- package/dist/cjs/mentionsPlugin.js +4 -12
- package/dist/cjs/pm-plugins/main.js +1 -1
- package/dist/cjs/ui/AnchoredPopup.js +37 -0
- package/dist/cjs/ui/InlineInvitePopupContainer.js +157 -0
- package/dist/cjs/ui/type-ahead/index.js +18 -11
- package/dist/es2019/entry-points/anchored-popup.js +2 -0
- package/dist/es2019/mentionsPlugin.js +4 -10
- package/dist/es2019/pm-plugins/main.js +1 -1
- package/dist/es2019/ui/AnchoredPopup.js +28 -0
- package/dist/es2019/ui/InlineInvitePopupContainer.js +146 -0
- package/dist/es2019/ui/type-ahead/index.js +18 -13
- package/dist/esm/entry-points/anchored-popup.js +2 -0
- package/dist/esm/mentionsPlugin.js +4 -12
- package/dist/esm/pm-plugins/main.js +1 -1
- package/dist/esm/ui/AnchoredPopup.js +29 -0
- package/dist/esm/ui/InlineInvitePopupContainer.js +148 -0
- package/dist/esm/ui/type-ahead/index.js +18 -11
- package/dist/types/entry-points/anchored-popup.d.ts +2 -0
- package/dist/types/ui/AnchoredPopup.d.ts +13 -0
- package/dist/types/ui/InlineInvitePopupContainer.d.ts +11 -0
- package/package.json +11 -5
- package/dist/cjs/pm-plugins/mentionPlaceholder.js +0 -52
- package/dist/cjs/ui/InlineInviteRecaptchaContainer.js +0 -100
- package/dist/es2019/pm-plugins/mentionPlaceholder.js +0 -44
- package/dist/es2019/ui/InlineInviteRecaptchaContainer.js +0 -90
- package/dist/esm/pm-plugins/mentionPlaceholder.js +0 -44
- package/dist/esm/ui/InlineInviteRecaptchaContainer.js +0 -91
- package/dist/types/pm-plugins/mentionPlaceholder.d.ts +0 -11
- package/dist/types/ui/InlineInviteRecaptchaContainer.d.ts +0 -15
|
@@ -23,8 +23,7 @@ import { mentionNodeSpec } from './nodeviews/mentionNodeSpec';
|
|
|
23
23
|
import { agentMentionPluginKey, createAgentMentionPlugin } from './pm-plugins/agent';
|
|
24
24
|
import { mentionPluginKey } from './pm-plugins/key';
|
|
25
25
|
import { ACTIONS, createMentionPlugin } from './pm-plugins/main';
|
|
26
|
-
import {
|
|
27
|
-
import { InlineInviteRecaptchaContainer } from './ui/InlineInviteRecaptchaContainer';
|
|
26
|
+
import { InlineInvitePopupContainer } from './ui/InlineInvitePopupContainer';
|
|
28
27
|
import { SecondaryToolbarComponent } from './ui/SecondaryToolbarComponent';
|
|
29
28
|
import { createTypeAheadConfig } from './ui/type-ahead';
|
|
30
29
|
var processName = function processName(name, intl) {
|
|
@@ -137,14 +136,6 @@ var mentionsPlugin = function mentionsPlugin(_ref3) {
|
|
|
137
136
|
}
|
|
138
137
|
});
|
|
139
138
|
}
|
|
140
|
-
if (fg('jira_invites_auto_tag_new_user_in_mentions_fg')) {
|
|
141
|
-
plugins.push({
|
|
142
|
-
name: 'mentionPlaceholder',
|
|
143
|
-
plugin: function plugin() {
|
|
144
|
-
return createMentionPlaceholderPlugin();
|
|
145
|
-
}
|
|
146
|
-
});
|
|
147
|
-
}
|
|
148
139
|
return plugins;
|
|
149
140
|
},
|
|
150
141
|
contentComponent: function contentComponent(_ref4) {
|
|
@@ -165,9 +156,10 @@ var mentionsPlugin = function mentionsPlugin(_ref3) {
|
|
|
165
156
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Component, {
|
|
166
157
|
mentionProvider: mentionProvider,
|
|
167
158
|
api: api
|
|
168
|
-
}), fg('
|
|
159
|
+
}), fg('inline_invite_from_mentions_kill_switch') && /*#__PURE__*/React.createElement(InlineInvitePopupContainer, {
|
|
169
160
|
mentionProvider: mentionProvider,
|
|
170
|
-
api: api
|
|
161
|
+
api: api,
|
|
162
|
+
editorView: editorView
|
|
171
163
|
}));
|
|
172
164
|
}
|
|
173
165
|
});
|
|
@@ -58,7 +58,7 @@ var AI_STREAMING_TRANSFORMATION_META_KEY = 'isAIStreamingTransformation';
|
|
|
58
58
|
var AGENT_MENTION_INACTIVITY_MS = 3000;
|
|
59
59
|
var MAX_PENDING_TYPED_AGENT_MENTION_FOCUS_DEFERS = 20;
|
|
60
60
|
var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
|
|
61
|
-
var PACKAGE_VERSION = "16.0.
|
|
61
|
+
var PACKAGE_VERSION = "16.0.3";
|
|
62
62
|
var setProvider = function setProvider(provider) {
|
|
63
63
|
return function (state, dispatch) {
|
|
64
64
|
if (dispatch) {
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
2
|
+
import { Popup } from '@atlaskit/popup/popup';
|
|
3
|
+
/**
|
|
4
|
+
* A `<Popup>` anchored to an externally-supplied DOM node. Unlike `PopupTrigger`, it has no
|
|
5
|
+
* clickable trigger of its own — it opens whenever `isOpen` becomes true, so callers can drive
|
|
6
|
+
* it from any external signal.
|
|
7
|
+
*/
|
|
8
|
+
export function AnchoredPopup(_ref) {
|
|
9
|
+
var anchorElement = _ref.anchorElement,
|
|
10
|
+
content = _ref.content,
|
|
11
|
+
isOpen = _ref.isOpen,
|
|
12
|
+
onClose = _ref.onClose;
|
|
13
|
+
var renderContent = useCallback(function () {
|
|
14
|
+
return isOpen ? content : null;
|
|
15
|
+
}, [isOpen, content]);
|
|
16
|
+
var renderTrigger = useCallback(function (triggerProps) {
|
|
17
|
+
if (anchorElement && typeof triggerProps.ref === 'function') {
|
|
18
|
+
triggerProps.ref(anchorElement);
|
|
19
|
+
}
|
|
20
|
+
return null;
|
|
21
|
+
}, [anchorElement]);
|
|
22
|
+
return /*#__PURE__*/React.createElement(Popup, {
|
|
23
|
+
isOpen: isOpen,
|
|
24
|
+
onClose: onClose,
|
|
25
|
+
placement: "bottom-start",
|
|
26
|
+
content: renderContent,
|
|
27
|
+
trigger: renderTrigger
|
|
28
|
+
});
|
|
29
|
+
}
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
/* InlineInvitePopupContainer.tsx generated by @compiled/babel-plugin v2.0.0 */
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
4
|
+
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
5
|
+
var findMentionRange = function findMentionRange(doc, localId) {
|
|
6
|
+
var range = null;
|
|
7
|
+
doc.descendants(function (node, pos) {
|
|
8
|
+
if (range) {
|
|
9
|
+
return false;
|
|
10
|
+
}
|
|
11
|
+
if (node.type.name === 'mention' && node.attrs.localId === localId) {
|
|
12
|
+
range = {
|
|
13
|
+
from: pos,
|
|
14
|
+
to: pos + node.nodeSize
|
|
15
|
+
};
|
|
16
|
+
return false;
|
|
17
|
+
}
|
|
18
|
+
return true;
|
|
19
|
+
});
|
|
20
|
+
return range;
|
|
21
|
+
};
|
|
22
|
+
export var InlineInvitePopupContainer = function InlineInvitePopupContainer(_ref) {
|
|
23
|
+
var _api$mention2, _api$core3;
|
|
24
|
+
var mentionProvider = _ref.mentionProvider,
|
|
25
|
+
api = _ref.api,
|
|
26
|
+
editorView = _ref.editorView;
|
|
27
|
+
var _useState = useState(null),
|
|
28
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
29
|
+
provider = _useState2[0],
|
|
30
|
+
setProvider = _useState2[1];
|
|
31
|
+
var _useState3 = useState(null),
|
|
32
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
33
|
+
anchorElement = _useState4[0],
|
|
34
|
+
setAnchorElement = _useState4[1];
|
|
35
|
+
var pendingMentionRef = useRef(null);
|
|
36
|
+
useEffect(function () {
|
|
37
|
+
if (!mentionProvider) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
var isMounted = true;
|
|
41
|
+
var cleanupProvider;
|
|
42
|
+
mentionProvider.then(function (resolvedProvider) {
|
|
43
|
+
var _providerWithPopup$ge;
|
|
44
|
+
if (!isMounted) {
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
var providerWithPopup = resolvedProvider;
|
|
48
|
+
var originalGetMentionDisabledState = (_providerWithPopup$ge = providerWithPopup.getMentionDisabledState) === null || _providerWithPopup$ge === void 0 ? void 0 : _providerWithPopup$ge.bind(providerWithPopup);
|
|
49
|
+
providerWithPopup.getMentionDisabledState = function (mention) {
|
|
50
|
+
var _pendingMentionRef$cu;
|
|
51
|
+
if (((_pendingMentionRef$cu = pendingMentionRef.current) === null || _pendingMentionRef$cu === void 0 ? void 0 : _pendingMentionRef$cu.localId) === mention.id) {
|
|
52
|
+
return {
|
|
53
|
+
disabled: true
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
return originalGetMentionDisabledState === null || originalGetMentionDisabledState === void 0 ? void 0 : originalGetMentionDisabledState(mention);
|
|
57
|
+
};
|
|
58
|
+
cleanupProvider = function cleanupProvider() {
|
|
59
|
+
if (originalGetMentionDisabledState) {
|
|
60
|
+
providerWithPopup.getMentionDisabledState = originalGetMentionDisabledState;
|
|
61
|
+
} else {
|
|
62
|
+
delete providerWithPopup.getMentionDisabledState;
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
setProvider(providerWithPopup);
|
|
66
|
+
}).catch(function () {});
|
|
67
|
+
return function () {
|
|
68
|
+
var _cleanupProvider;
|
|
69
|
+
isMounted = false;
|
|
70
|
+
(_cleanupProvider = cleanupProvider) === null || _cleanupProvider === void 0 || _cleanupProvider();
|
|
71
|
+
setProvider(null);
|
|
72
|
+
};
|
|
73
|
+
}, [mentionProvider]);
|
|
74
|
+
var removePendingMention = useCallback(function () {
|
|
75
|
+
var _api$core;
|
|
76
|
+
var pending = pendingMentionRef.current;
|
|
77
|
+
if (pending && api !== null && api !== void 0 && (_api$core = api.core) !== null && _api$core !== void 0 && (_api$core = _api$core.actions) !== null && _api$core !== void 0 && _api$core.execute) {
|
|
78
|
+
api.core.actions.execute(function (_ref2) {
|
|
79
|
+
var tr = _ref2.tr;
|
|
80
|
+
var range = findMentionRange(tr.doc, pending.localId);
|
|
81
|
+
return range ? tr.delete(range.from, range.to) : null;
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
pendingMentionRef.current = null;
|
|
85
|
+
setAnchorElement(null);
|
|
86
|
+
}, [api]);
|
|
87
|
+
var handleDismiss = useCallback(function () {
|
|
88
|
+
removePendingMention();
|
|
89
|
+
}, [removePendingMention]);
|
|
90
|
+
var handleInviteComplete = useCallback(function (result) {
|
|
91
|
+
var _result$invited$, _api$core2, _api$mention;
|
|
92
|
+
var pending = pendingMentionRef.current;
|
|
93
|
+
if (!pending) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
var invitedUser = (_result$invited$ = result.invited[0]) !== null && _result$invited$ !== void 0 ? _result$invited$ : result.requested[0];
|
|
97
|
+
if (!invitedUser || !(api !== null && api !== void 0 && (_api$core2 = api.core) !== null && _api$core2 !== void 0 && (_api$core2 = _api$core2.actions) !== null && _api$core2 !== void 0 && _api$core2.execute) || !(api !== null && api !== void 0 && (_api$mention = api.mention) !== null && _api$mention !== void 0 && (_api$mention = _api$mention.commands) !== null && _api$mention !== void 0 && _api$mention.insertMention)) {
|
|
98
|
+
removePendingMention();
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
var userId = invitedUser.id,
|
|
102
|
+
email = invitedUser.email;
|
|
103
|
+
api.core.actions.execute(function (_ref3) {
|
|
104
|
+
var tr = _ref3.tr;
|
|
105
|
+
var range = findMentionRange(tr.doc, pending.localId);
|
|
106
|
+
return range ? tr.delete(range.from, range.to) : null;
|
|
107
|
+
});
|
|
108
|
+
api.core.actions.execute(api.mention.commands.insertMention({
|
|
109
|
+
id: userId,
|
|
110
|
+
name: email,
|
|
111
|
+
userType: 'DEFAULT',
|
|
112
|
+
accessLevel: 'CONTAINER'
|
|
113
|
+
}));
|
|
114
|
+
pendingMentionRef.current = null;
|
|
115
|
+
setAnchorElement(null);
|
|
116
|
+
}, [api, removePendingMention]);
|
|
117
|
+
var handleReady = useCallback(function (show) {
|
|
118
|
+
if (!provider) {
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
121
|
+
if (show) {
|
|
122
|
+
provider.showInlineInvitePopup = function (email, localId) {
|
|
123
|
+
pendingMentionRef.current = {
|
|
124
|
+
email: email,
|
|
125
|
+
localId: localId
|
|
126
|
+
};
|
|
127
|
+
setTimeout(function () {
|
|
128
|
+
var range = findMentionRange(editorView.state.doc, localId);
|
|
129
|
+
var dom = range ? editorView.nodeDOM(range.from) : null;
|
|
130
|
+
setAnchorElement(dom instanceof HTMLElement ? dom : null);
|
|
131
|
+
show(email);
|
|
132
|
+
}, 0);
|
|
133
|
+
};
|
|
134
|
+
} else {
|
|
135
|
+
delete provider.showInlineInvitePopup;
|
|
136
|
+
}
|
|
137
|
+
}, [provider, editorView]);
|
|
138
|
+
if (!(provider !== null && provider !== void 0 && provider.InlineInvitePopup) || !(api !== null && api !== void 0 && (_api$mention2 = api.mention) !== null && _api$mention2 !== void 0 && (_api$mention2 = _api$mention2.commands) !== null && _api$mention2 !== void 0 && _api$mention2.insertMention) || !(api !== null && api !== void 0 && (_api$core3 = api.core) !== null && _api$core3 !== void 0 && (_api$core3 = _api$core3.actions) !== null && _api$core3 !== void 0 && _api$core3.execute)) {
|
|
139
|
+
return null;
|
|
140
|
+
}
|
|
141
|
+
var PopupComponent = provider.InlineInvitePopup;
|
|
142
|
+
return /*#__PURE__*/React.createElement(PopupComponent, {
|
|
143
|
+
anchorElement: anchorElement,
|
|
144
|
+
onInviteComplete: handleInviteComplete,
|
|
145
|
+
onDismiss: handleDismiss,
|
|
146
|
+
onReady: handleReady
|
|
147
|
+
});
|
|
148
|
+
};
|
|
@@ -23,7 +23,6 @@ import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
|
|
|
23
23
|
import { createSingleMentionFragment } from '../../editor-commands';
|
|
24
24
|
import { mentionPluginKey } from '../../pm-plugins/key';
|
|
25
25
|
import { ACTIONS } from '../../pm-plugins/main';
|
|
26
|
-
import { mentionPlaceholderPluginKey, MENTION_PLACEHOLDER_ACTIONS } from '../../pm-plugins/mentionPlaceholder';
|
|
27
26
|
import { getMentionPluginState } from '../../pm-plugins/utils';
|
|
28
27
|
import InviteItem, { INVITE_ITEM_DESCRIPTION } from '../InviteItem';
|
|
29
28
|
import InviteItemWithEmailDomain from '../InviteItem/InviteItemWithEmailDomain';
|
|
@@ -58,7 +57,7 @@ var createInviteItem = function createInviteItem(_ref) {
|
|
|
58
57
|
var isSelected = _ref2.isSelected,
|
|
59
58
|
onClick = _ref2.onClick,
|
|
60
59
|
onHover = _ref2.onHover;
|
|
61
|
-
return emailDomain && (_mentionProvider$getS = mentionProvider.getShouldEnableInlineInvite) !== null && _mentionProvider$getS !== void 0 && _mentionProvider$getS.call(mentionProvider) && fg('
|
|
60
|
+
return emailDomain && (_mentionProvider$getS = mentionProvider.getShouldEnableInlineInvite) !== null && _mentionProvider$getS !== void 0 && _mentionProvider$getS.call(mentionProvider) && fg('inline_invite_from_mentions_kill_switch') ? /*#__PURE__*/React.createElement(InviteItemWithEmailDomain, {
|
|
62
61
|
productName: mentionProvider ? mentionProvider.productName : undefined,
|
|
63
62
|
selected: isSelected,
|
|
64
63
|
onMount: onInviteItemMount,
|
|
@@ -481,10 +480,10 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref8) {
|
|
|
481
480
|
// Don't fire event and the callback with selection by space press
|
|
482
481
|
if (mode !== 'space') {
|
|
483
482
|
var _mentionProvider$getS3, _mentionProvider$getS4;
|
|
484
|
-
fireEvent(buildTypeAheadInviteItemClickedPayload(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, mode, query, contextIdentifierProvider, mentionProvider.userRole, fg('
|
|
483
|
+
fireEvent(buildTypeAheadInviteItemClickedPayload(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, mode, query, contextIdentifierProvider, mentionProvider.userRole, fg('inline_invite_from_mentions_kill_switch') ? {
|
|
485
484
|
isInlineInviteMentionsEnabled: (_mentionProvider$getS3 = mentionProvider.getShouldEnableInlineInvite) === null || _mentionProvider$getS3 === void 0 ? void 0 : _mentionProvider$getS3.call(mentionProvider)
|
|
486
485
|
} : {}));
|
|
487
|
-
if ((_mentionProvider$getS4 = mentionProvider.getShouldEnableInlineInvite) !== null && _mentionProvider$getS4 !== void 0 && _mentionProvider$getS4.call(mentionProvider) && fg('
|
|
486
|
+
if ((_mentionProvider$getS4 = mentionProvider.getShouldEnableInlineInvite) !== null && _mentionProvider$getS4 !== void 0 && _mentionProvider$getS4.call(mentionProvider) && fg('inline_invite_from_mentions_kill_switch')) {
|
|
488
487
|
// Get the email from query, using the same logic as InviteItemWithEmailDomain
|
|
489
488
|
var emailDomain = mentionProvider.userEmailDomain;
|
|
490
489
|
var email = query || '';
|
|
@@ -493,13 +492,21 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref8) {
|
|
|
493
492
|
email = "".concat(email.toLowerCase(), "@").concat(emailDomain);
|
|
494
493
|
}
|
|
495
494
|
// If query already includes @, use it as is
|
|
496
|
-
if (email && mentionProvider.
|
|
497
|
-
|
|
498
|
-
var _tr =
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
495
|
+
if (email && mentionProvider.showInlineInvitePopup) {
|
|
496
|
+
var pendingLocalId = crypto.randomUUID();
|
|
497
|
+
var _tr = insert(createSingleMentionFragment({
|
|
498
|
+
mentionProvider: mentionProvider,
|
|
499
|
+
mentionInsertDisplayName: mentionInsertDisplayName,
|
|
500
|
+
tr: state.tr,
|
|
501
|
+
sanitizePrivateContent: sanitizePrivateContent
|
|
502
|
+
})({
|
|
503
|
+
name: email,
|
|
504
|
+
id: pendingLocalId,
|
|
505
|
+
userType: 'DEFAULT',
|
|
506
|
+
localId: pendingLocalId,
|
|
507
|
+
accessLevel: 'CONTAINER'
|
|
508
|
+
}));
|
|
509
|
+
mentionProvider.showInlineInvitePopup(email, pendingLocalId);
|
|
503
510
|
return _tr;
|
|
504
511
|
}
|
|
505
512
|
} else if (mentionProvider.onInviteItemClick) {
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
export type AnchoredPopupProps = {
|
|
3
|
+
anchorElement: HTMLElement | null;
|
|
4
|
+
content: ReactNode;
|
|
5
|
+
isOpen: boolean;
|
|
6
|
+
onClose: () => void;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* A `<Popup>` anchored to an externally-supplied DOM node. Unlike `PopupTrigger`, it has no
|
|
10
|
+
* clickable trigger of its own — it opens whenever `isOpen` becomes true, so callers can drive
|
|
11
|
+
* it from any external signal.
|
|
12
|
+
*/
|
|
13
|
+
export declare function AnchoredPopup({ anchorElement, content, isOpen, onClose, }: AnchoredPopupProps): JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
2
|
+
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
3
|
+
import type { MentionProvider } from '@atlaskit/mention/resource';
|
|
4
|
+
import type { MentionsPlugin } from '../mentionsPluginType';
|
|
5
|
+
interface Props {
|
|
6
|
+
api: ExtractInjectionAPI<MentionsPlugin> | undefined;
|
|
7
|
+
editorView: EditorView;
|
|
8
|
+
mentionProvider: Promise<MentionProvider> | undefined;
|
|
9
|
+
}
|
|
10
|
+
export declare const InlineInvitePopupContainer: ({ mentionProvider, api, editorView, }: Props) => JSX.Element | null;
|
|
11
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-mentions",
|
|
3
|
-
"version": "16.0
|
|
3
|
+
"version": "16.1.0",
|
|
4
4
|
"description": "Mentions plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -34,17 +34,18 @@
|
|
|
34
34
|
"@atlaskit/insm": "^1.2.0",
|
|
35
35
|
"@atlaskit/link": "^5.0.0",
|
|
36
36
|
"@atlaskit/lozenge": "^15.0.0",
|
|
37
|
-
"@atlaskit/mention": "^27.
|
|
37
|
+
"@atlaskit/mention": "^27.15.0",
|
|
38
38
|
"@atlaskit/platform-feature-experiments": "^0.3.0",
|
|
39
39
|
"@atlaskit/platform-feature-flags": "^2.1.0",
|
|
40
40
|
"@atlaskit/popper": "^9.1.0",
|
|
41
|
+
"@atlaskit/popup": "^6.0.0",
|
|
41
42
|
"@atlaskit/portal": "^6.2.0",
|
|
42
43
|
"@atlaskit/primitives": "^22.2.0",
|
|
43
44
|
"@atlaskit/profilecard": "^26.16.0",
|
|
44
45
|
"@atlaskit/teams-app-config": "^2.2.0",
|
|
45
46
|
"@atlaskit/theme": "^28.0.0",
|
|
46
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
47
|
-
"@atlaskit/tokens": "^16.
|
|
47
|
+
"@atlaskit/tmp-editor-statsig": "^145.0.0",
|
|
48
|
+
"@atlaskit/tokens": "^16.5.0",
|
|
48
49
|
"@atlaskit/tooltip": "^24.0.0",
|
|
49
50
|
"@atlaskit/user-picker": "^13.8.0",
|
|
50
51
|
"@babel/runtime": "^7.0.0",
|
|
@@ -55,12 +56,14 @@
|
|
|
55
56
|
"uuid": "^3.1.0"
|
|
56
57
|
},
|
|
57
58
|
"peerDependencies": {
|
|
58
|
-
"@atlaskit/editor-common": "^118.
|
|
59
|
+
"@atlaskit/editor-common": "^118.2.0",
|
|
59
60
|
"react": "^18.2.0 || ^19.2.0",
|
|
60
61
|
"react-dom": "^18.2.0 || ^19.2.0",
|
|
61
62
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
|
62
63
|
},
|
|
63
64
|
"devDependencies": {
|
|
65
|
+
"@atlaskit/button": "^25.0.0",
|
|
66
|
+
"@atlaskit/editor-core": "^223.0.0",
|
|
64
67
|
"@testing-library/react": "^16.3.0",
|
|
65
68
|
"react": "^19.2.0",
|
|
66
69
|
"react-dom": "^19.2.0",
|
|
@@ -117,6 +120,9 @@
|
|
|
117
120
|
"jira_invites_auto_tag_new_user_in_mentions_fg": {
|
|
118
121
|
"type": "boolean"
|
|
119
122
|
},
|
|
123
|
+
"inline_invite_from_mentions_kill_switch": {
|
|
124
|
+
"type": "boolean"
|
|
125
|
+
},
|
|
120
126
|
"people-teams_migrate-user-profile-card": {
|
|
121
127
|
"type": "boolean"
|
|
122
128
|
},
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.MENTION_PLACEHOLDER_ACTIONS = void 0;
|
|
7
|
-
exports.createMentionPlaceholderPlugin = createMentionPlaceholderPlugin;
|
|
8
|
-
exports.mentionPlaceholderPluginKey = void 0;
|
|
9
|
-
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
10
|
-
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
11
|
-
var _view = require("@atlaskit/editor-prosemirror/view");
|
|
12
|
-
var mentionPlaceholderPluginKey = exports.mentionPlaceholderPluginKey = new _state.PluginKey('mentionPlaceholderPlugin');
|
|
13
|
-
var MENTION_PLACEHOLDER_ACTIONS = exports.MENTION_PLACEHOLDER_ACTIONS = {
|
|
14
|
-
SHOW_PLACEHOLDER: 'SHOW_PLACEHOLDER',
|
|
15
|
-
HIDE_PLACEHOLDER: 'HIDE_PLACEHOLDER'
|
|
16
|
-
};
|
|
17
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
|
|
18
|
-
function createMentionPlaceholderPlugin() {
|
|
19
|
-
return new _safePlugin.SafePlugin({
|
|
20
|
-
key: mentionPlaceholderPluginKey,
|
|
21
|
-
state: {
|
|
22
|
-
init: function init() {
|
|
23
|
-
return {};
|
|
24
|
-
},
|
|
25
|
-
apply: function apply(tr, pluginState) {
|
|
26
|
-
var meta = tr.getMeta(mentionPlaceholderPluginKey);
|
|
27
|
-
if ((meta === null || meta === void 0 ? void 0 : meta.action) === MENTION_PLACEHOLDER_ACTIONS.SHOW_PLACEHOLDER) {
|
|
28
|
-
return {
|
|
29
|
-
placeholder: meta.placeholder
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
if ((meta === null || meta === void 0 ? void 0 : meta.action) === MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER) {
|
|
33
|
-
return {};
|
|
34
|
-
}
|
|
35
|
-
return pluginState;
|
|
36
|
-
}
|
|
37
|
-
},
|
|
38
|
-
props: {
|
|
39
|
-
decorations: function decorations(state) {
|
|
40
|
-
var pluginState = mentionPlaceholderPluginKey.getState(state);
|
|
41
|
-
if (pluginState !== null && pluginState !== void 0 && pluginState.placeholder) {
|
|
42
|
-
var selection = state.selection;
|
|
43
|
-
var span = document.createElement('span');
|
|
44
|
-
span.textContent = pluginState.placeholder;
|
|
45
|
-
span.style.setProperty('color', "var(--ds-text-accent-blue, #1558BC)");
|
|
46
|
-
return _view.DecorationSet.create(state.doc, [_view.Decoration.widget(selection.from, span)]);
|
|
47
|
-
}
|
|
48
|
-
return null;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
});
|
|
52
|
-
}
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
/* InlineInviteRecaptchaContainer.tsx generated by @compiled/babel-plugin v2.0.0 */
|
|
2
|
-
"use strict";
|
|
3
|
-
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
Object.defineProperty(exports, "__esModule", {
|
|
7
|
-
value: true
|
|
8
|
-
});
|
|
9
|
-
exports.InlineInviteRecaptchaContainer = void 0;
|
|
10
|
-
var _runtime = require("@compiled/react/runtime");
|
|
11
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
12
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
var _mentionPlaceholder = require("../pm-plugins/mentionPlaceholder");
|
|
14
|
-
var _analytics = require("../ui/type-ahead/analytics");
|
|
15
|
-
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 _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
16
|
-
/**
|
|
17
|
-
* Container that renders the recaptcha component from the mention provider and manages handleSuccess.
|
|
18
|
-
* Does NOT pass email - the provider's component uses useInlineInviteRecaptcha hook internally
|
|
19
|
-
* and wires showRecaptcha to the provider. When user clicks invite item, type-ahead calls
|
|
20
|
-
* mentionProvider.showInlineInviteRecaptcha(email) which passes email to the component.
|
|
21
|
-
*/
|
|
22
|
-
var InlineInviteRecaptchaContainer = exports.InlineInviteRecaptchaContainer = function InlineInviteRecaptchaContainer(_ref) {
|
|
23
|
-
var _api$mention2, _api$core3;
|
|
24
|
-
var mentionProvider = _ref.mentionProvider,
|
|
25
|
-
api = _ref.api;
|
|
26
|
-
var _useState = (0, _react.useState)(null),
|
|
27
|
-
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
28
|
-
provider = _useState2[0],
|
|
29
|
-
setProvider = _useState2[1];
|
|
30
|
-
(0, _react.useEffect)(function () {
|
|
31
|
-
if (!mentionProvider) {
|
|
32
|
-
return;
|
|
33
|
-
}
|
|
34
|
-
var isMounted = true;
|
|
35
|
-
mentionProvider.then(function (resolvedProvider) {
|
|
36
|
-
if (!isMounted) {
|
|
37
|
-
return;
|
|
38
|
-
}
|
|
39
|
-
setProvider(resolvedProvider);
|
|
40
|
-
}).catch(function () {
|
|
41
|
-
// Silently handle promise rejection
|
|
42
|
-
});
|
|
43
|
-
return function () {
|
|
44
|
-
isMounted = false;
|
|
45
|
-
setProvider(null);
|
|
46
|
-
};
|
|
47
|
-
}, [mentionProvider]);
|
|
48
|
-
var handleSuccess = (0, _react.useCallback)(function (userId, email) {
|
|
49
|
-
var _api$mention, _api$core;
|
|
50
|
-
if (!(api !== null && api !== void 0 && (_api$mention = api.mention) !== null && _api$mention !== void 0 && (_api$mention = _api$mention.commands) !== null && _api$mention !== void 0 && _api$mention.insertMention) || !(api !== null && api !== void 0 && (_api$core = api.core) !== null && _api$core !== void 0 && (_api$core = _api$core.actions) !== null && _api$core !== void 0 && _api$core.execute)) {
|
|
51
|
-
return;
|
|
52
|
-
}
|
|
53
|
-
var name = email.split('@')[0] || email;
|
|
54
|
-
api.core.actions.execute(api.mention.commands.insertMention({
|
|
55
|
-
id: userId,
|
|
56
|
-
name: name,
|
|
57
|
-
userType: 'DEFAULT',
|
|
58
|
-
accessLevel: 'CONTAINER'
|
|
59
|
-
}));
|
|
60
|
-
api.core.actions.execute(function (_ref2) {
|
|
61
|
-
var tr = _ref2.tr;
|
|
62
|
-
tr.setMeta(_mentionPlaceholder.mentionPlaceholderPluginKey, {
|
|
63
|
-
action: _mentionPlaceholder.MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER
|
|
64
|
-
});
|
|
65
|
-
return tr;
|
|
66
|
-
});
|
|
67
|
-
}, [api]);
|
|
68
|
-
var handleClose = (0, _react.useCallback)(function () {
|
|
69
|
-
var _api$core2;
|
|
70
|
-
if (!(api !== null && api !== void 0 && (_api$core2 = api.core) !== null && _api$core2 !== void 0 && (_api$core2 = _api$core2.actions) !== null && _api$core2 !== void 0 && _api$core2.execute)) {
|
|
71
|
-
return;
|
|
72
|
-
}
|
|
73
|
-
api.core.actions.execute(function (_ref3) {
|
|
74
|
-
var tr = _ref3.tr;
|
|
75
|
-
tr.setMeta(_mentionPlaceholder.mentionPlaceholderPluginKey, {
|
|
76
|
-
action: _mentionPlaceholder.MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER
|
|
77
|
-
});
|
|
78
|
-
return tr;
|
|
79
|
-
});
|
|
80
|
-
}, [api]);
|
|
81
|
-
var handleReady = (0, _react.useCallback)(function (showRecaptcha) {
|
|
82
|
-
if (provider) {
|
|
83
|
-
if (showRecaptcha) {
|
|
84
|
-
provider.showInlineInviteRecaptcha = showRecaptcha;
|
|
85
|
-
} else {
|
|
86
|
-
delete provider.showInlineInviteRecaptcha;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}, [provider]);
|
|
90
|
-
if (!(provider !== null && provider !== void 0 && provider.InlineInviteRecaptcha) || !(api !== null && api !== void 0 && (_api$mention2 = api.mention) !== null && _api$mention2 !== void 0 && (_api$mention2 = _api$mention2.commands) !== null && _api$mention2 !== void 0 && _api$mention2.insertMention) || !(api !== null && api !== void 0 && (_api$core3 = api.core) !== null && _api$core3 !== void 0 && (_api$core3 = _api$core3.actions) !== null && _api$core3 !== void 0 && _api$core3.execute)) {
|
|
91
|
-
return null;
|
|
92
|
-
}
|
|
93
|
-
var RecaptchaComponent = provider.InlineInviteRecaptcha;
|
|
94
|
-
return /*#__PURE__*/_react.default.createElement(RecaptchaComponent, {
|
|
95
|
-
analyticsSource: _analytics.MENTION_SOURCE,
|
|
96
|
-
onSuccess: handleSuccess,
|
|
97
|
-
onClose: handleClose,
|
|
98
|
-
onReady: handleReady
|
|
99
|
-
});
|
|
100
|
-
};
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
-
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
-
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
-
export const mentionPlaceholderPluginKey = new PluginKey('mentionPlaceholderPlugin');
|
|
5
|
-
export const MENTION_PLACEHOLDER_ACTIONS = {
|
|
6
|
-
SHOW_PLACEHOLDER: 'SHOW_PLACEHOLDER',
|
|
7
|
-
HIDE_PLACEHOLDER: 'HIDE_PLACEHOLDER'
|
|
8
|
-
};
|
|
9
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
|
|
10
|
-
export function createMentionPlaceholderPlugin() {
|
|
11
|
-
return new SafePlugin({
|
|
12
|
-
key: mentionPlaceholderPluginKey,
|
|
13
|
-
state: {
|
|
14
|
-
init: () => ({}),
|
|
15
|
-
apply(tr, pluginState) {
|
|
16
|
-
const meta = tr.getMeta(mentionPlaceholderPluginKey);
|
|
17
|
-
if ((meta === null || meta === void 0 ? void 0 : meta.action) === MENTION_PLACEHOLDER_ACTIONS.SHOW_PLACEHOLDER) {
|
|
18
|
-
return {
|
|
19
|
-
placeholder: meta.placeholder
|
|
20
|
-
};
|
|
21
|
-
}
|
|
22
|
-
if ((meta === null || meta === void 0 ? void 0 : meta.action) === MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER) {
|
|
23
|
-
return {};
|
|
24
|
-
}
|
|
25
|
-
return pluginState;
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
props: {
|
|
29
|
-
decorations: state => {
|
|
30
|
-
const pluginState = mentionPlaceholderPluginKey.getState(state);
|
|
31
|
-
if (pluginState !== null && pluginState !== void 0 && pluginState.placeholder) {
|
|
32
|
-
const {
|
|
33
|
-
selection
|
|
34
|
-
} = state;
|
|
35
|
-
const span = document.createElement('span');
|
|
36
|
-
span.textContent = pluginState.placeholder;
|
|
37
|
-
span.style.setProperty('color', "var(--ds-text-accent-blue, #1558BC)");
|
|
38
|
-
return DecorationSet.create(state.doc, [Decoration.widget(selection.from, span)]);
|
|
39
|
-
}
|
|
40
|
-
return null;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
});
|
|
44
|
-
}
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
/* InlineInviteRecaptchaContainer.tsx generated by @compiled/babel-plugin v2.0.0 */
|
|
2
|
-
import { ax, ix } from "@compiled/react/runtime";
|
|
3
|
-
import React, { useCallback, useEffect, useState } from 'react';
|
|
4
|
-
import { mentionPlaceholderPluginKey, MENTION_PLACEHOLDER_ACTIONS } from '../pm-plugins/mentionPlaceholder';
|
|
5
|
-
import { MENTION_SOURCE } from '../ui/type-ahead/analytics';
|
|
6
|
-
/**
|
|
7
|
-
* Container that renders the recaptcha component from the mention provider and manages handleSuccess.
|
|
8
|
-
* Does NOT pass email - the provider's component uses useInlineInviteRecaptcha hook internally
|
|
9
|
-
* and wires showRecaptcha to the provider. When user clicks invite item, type-ahead calls
|
|
10
|
-
* mentionProvider.showInlineInviteRecaptcha(email) which passes email to the component.
|
|
11
|
-
*/
|
|
12
|
-
export const InlineInviteRecaptchaContainer = ({
|
|
13
|
-
mentionProvider,
|
|
14
|
-
api
|
|
15
|
-
}) => {
|
|
16
|
-
var _api$mention2, _api$mention2$command, _api$core3, _api$core3$actions;
|
|
17
|
-
const [provider, setProvider] = useState(null);
|
|
18
|
-
useEffect(() => {
|
|
19
|
-
if (!mentionProvider) {
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
let isMounted = true;
|
|
23
|
-
mentionProvider.then(resolvedProvider => {
|
|
24
|
-
if (!isMounted) {
|
|
25
|
-
return;
|
|
26
|
-
}
|
|
27
|
-
setProvider(resolvedProvider);
|
|
28
|
-
}).catch(() => {
|
|
29
|
-
// Silently handle promise rejection
|
|
30
|
-
});
|
|
31
|
-
return () => {
|
|
32
|
-
isMounted = false;
|
|
33
|
-
setProvider(null);
|
|
34
|
-
};
|
|
35
|
-
}, [mentionProvider]);
|
|
36
|
-
const handleSuccess = useCallback((userId, email) => {
|
|
37
|
-
var _api$mention, _api$mention$commands, _api$core, _api$core$actions;
|
|
38
|
-
if (!(api !== null && api !== void 0 && (_api$mention = api.mention) !== null && _api$mention !== void 0 && (_api$mention$commands = _api$mention.commands) !== null && _api$mention$commands !== void 0 && _api$mention$commands.insertMention) || !(api !== null && api !== void 0 && (_api$core = api.core) !== null && _api$core !== void 0 && (_api$core$actions = _api$core.actions) !== null && _api$core$actions !== void 0 && _api$core$actions.execute)) {
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
const name = email.split('@')[0] || email;
|
|
42
|
-
api.core.actions.execute(api.mention.commands.insertMention({
|
|
43
|
-
id: userId,
|
|
44
|
-
name,
|
|
45
|
-
userType: 'DEFAULT',
|
|
46
|
-
accessLevel: 'CONTAINER'
|
|
47
|
-
}));
|
|
48
|
-
api.core.actions.execute(({
|
|
49
|
-
tr
|
|
50
|
-
}) => {
|
|
51
|
-
tr.setMeta(mentionPlaceholderPluginKey, {
|
|
52
|
-
action: MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER
|
|
53
|
-
});
|
|
54
|
-
return tr;
|
|
55
|
-
});
|
|
56
|
-
}, [api]);
|
|
57
|
-
const handleClose = useCallback(() => {
|
|
58
|
-
var _api$core2, _api$core2$actions;
|
|
59
|
-
if (!(api !== null && api !== void 0 && (_api$core2 = api.core) !== null && _api$core2 !== void 0 && (_api$core2$actions = _api$core2.actions) !== null && _api$core2$actions !== void 0 && _api$core2$actions.execute)) {
|
|
60
|
-
return;
|
|
61
|
-
}
|
|
62
|
-
api.core.actions.execute(({
|
|
63
|
-
tr
|
|
64
|
-
}) => {
|
|
65
|
-
tr.setMeta(mentionPlaceholderPluginKey, {
|
|
66
|
-
action: MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER
|
|
67
|
-
});
|
|
68
|
-
return tr;
|
|
69
|
-
});
|
|
70
|
-
}, [api]);
|
|
71
|
-
const handleReady = useCallback(showRecaptcha => {
|
|
72
|
-
if (provider) {
|
|
73
|
-
if (showRecaptcha) {
|
|
74
|
-
provider.showInlineInviteRecaptcha = showRecaptcha;
|
|
75
|
-
} else {
|
|
76
|
-
delete provider.showInlineInviteRecaptcha;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
}, [provider]);
|
|
80
|
-
if (!(provider !== null && provider !== void 0 && provider.InlineInviteRecaptcha) || !(api !== null && api !== void 0 && (_api$mention2 = api.mention) !== null && _api$mention2 !== void 0 && (_api$mention2$command = _api$mention2.commands) !== null && _api$mention2$command !== void 0 && _api$mention2$command.insertMention) || !(api !== null && api !== void 0 && (_api$core3 = api.core) !== null && _api$core3 !== void 0 && (_api$core3$actions = _api$core3.actions) !== null && _api$core3$actions !== void 0 && _api$core3$actions.execute)) {
|
|
81
|
-
return null;
|
|
82
|
-
}
|
|
83
|
-
const RecaptchaComponent = provider.InlineInviteRecaptcha;
|
|
84
|
-
return /*#__PURE__*/React.createElement(RecaptchaComponent, {
|
|
85
|
-
analyticsSource: MENTION_SOURCE,
|
|
86
|
-
onSuccess: handleSuccess,
|
|
87
|
-
onClose: handleClose,
|
|
88
|
-
onReady: handleReady
|
|
89
|
-
});
|
|
90
|
-
};
|