@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.
Files changed (32) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/anchored-popup/package.json +10 -0
  3. package/dist/cjs/entry-points/anchored-popup.js +12 -0
  4. package/dist/cjs/mentionsPlugin.js +4 -12
  5. package/dist/cjs/pm-plugins/main.js +1 -1
  6. package/dist/cjs/ui/AnchoredPopup.js +37 -0
  7. package/dist/cjs/ui/InlineInvitePopupContainer.js +157 -0
  8. package/dist/cjs/ui/type-ahead/index.js +18 -11
  9. package/dist/es2019/entry-points/anchored-popup.js +2 -0
  10. package/dist/es2019/mentionsPlugin.js +4 -10
  11. package/dist/es2019/pm-plugins/main.js +1 -1
  12. package/dist/es2019/ui/AnchoredPopup.js +28 -0
  13. package/dist/es2019/ui/InlineInvitePopupContainer.js +146 -0
  14. package/dist/es2019/ui/type-ahead/index.js +18 -13
  15. package/dist/esm/entry-points/anchored-popup.js +2 -0
  16. package/dist/esm/mentionsPlugin.js +4 -12
  17. package/dist/esm/pm-plugins/main.js +1 -1
  18. package/dist/esm/ui/AnchoredPopup.js +29 -0
  19. package/dist/esm/ui/InlineInvitePopupContainer.js +148 -0
  20. package/dist/esm/ui/type-ahead/index.js +18 -11
  21. package/dist/types/entry-points/anchored-popup.d.ts +2 -0
  22. package/dist/types/ui/AnchoredPopup.d.ts +13 -0
  23. package/dist/types/ui/InlineInvitePopupContainer.d.ts +11 -0
  24. package/package.json +11 -5
  25. package/dist/cjs/pm-plugins/mentionPlaceholder.js +0 -52
  26. package/dist/cjs/ui/InlineInviteRecaptchaContainer.js +0 -100
  27. package/dist/es2019/pm-plugins/mentionPlaceholder.js +0 -44
  28. package/dist/es2019/ui/InlineInviteRecaptchaContainer.js +0 -90
  29. package/dist/esm/pm-plugins/mentionPlaceholder.js +0 -44
  30. package/dist/esm/ui/InlineInviteRecaptchaContainer.js +0 -91
  31. package/dist/types/pm-plugins/mentionPlaceholder.d.ts +0 -11
  32. 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 { createMentionPlaceholderPlugin } from './pm-plugins/mentionPlaceholder';
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('jira_invites_auto_tag_new_user_in_mentions_fg') && /*#__PURE__*/React.createElement(InlineInviteRecaptchaContainer, {
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.1";
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('jira_invites_auto_tag_new_user_in_mentions_fg') ? /*#__PURE__*/React.createElement(InviteItemWithEmailDomain, {
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('jira_invites_auto_tag_new_user_in_mentions_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('jira_invites_auto_tag_new_user_in_mentions_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.showInlineInviteRecaptcha) {
497
- mentionProvider.showInlineInviteRecaptcha(email);
498
- var _tr = state.tr;
499
- _tr.setMeta(mentionPlaceholderPluginKey, {
500
- action: MENTION_PLACEHOLDER_ACTIONS.SHOW_PLACEHOLDER,
501
- placeholder: "@".concat(query)
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,2 @@
1
+ export { AnchoredPopup } from '../ui/AnchoredPopup';
2
+ export type { AnchoredPopupProps } from '../ui/AnchoredPopup';
@@ -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.2",
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.14.0",
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": "^143.0.0",
47
- "@atlaskit/tokens": "^16.4.0",
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.1.0",
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
- };