@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
|
@@ -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 var mentionPlaceholderPluginKey = new PluginKey('mentionPlaceholderPlugin');
|
|
5
|
-
export var 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: function init() {
|
|
15
|
-
return {};
|
|
16
|
-
},
|
|
17
|
-
apply: function apply(tr, pluginState) {
|
|
18
|
-
var meta = tr.getMeta(mentionPlaceholderPluginKey);
|
|
19
|
-
if ((meta === null || meta === void 0 ? void 0 : meta.action) === MENTION_PLACEHOLDER_ACTIONS.SHOW_PLACEHOLDER) {
|
|
20
|
-
return {
|
|
21
|
-
placeholder: meta.placeholder
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
if ((meta === null || meta === void 0 ? void 0 : meta.action) === MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER) {
|
|
25
|
-
return {};
|
|
26
|
-
}
|
|
27
|
-
return pluginState;
|
|
28
|
-
}
|
|
29
|
-
},
|
|
30
|
-
props: {
|
|
31
|
-
decorations: function decorations(state) {
|
|
32
|
-
var pluginState = mentionPlaceholderPluginKey.getState(state);
|
|
33
|
-
if (pluginState !== null && pluginState !== void 0 && pluginState.placeholder) {
|
|
34
|
-
var selection = state.selection;
|
|
35
|
-
var 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,91 +0,0 @@
|
|
|
1
|
-
/* InlineInviteRecaptchaContainer.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, useState } from 'react';
|
|
5
|
-
import { mentionPlaceholderPluginKey, MENTION_PLACEHOLDER_ACTIONS } from '../pm-plugins/mentionPlaceholder';
|
|
6
|
-
import { MENTION_SOURCE } from '../ui/type-ahead/analytics';
|
|
7
|
-
/**
|
|
8
|
-
* Container that renders the recaptcha component from the mention provider and manages handleSuccess.
|
|
9
|
-
* Does NOT pass email - the provider's component uses useInlineInviteRecaptcha hook internally
|
|
10
|
-
* and wires showRecaptcha to the provider. When user clicks invite item, type-ahead calls
|
|
11
|
-
* mentionProvider.showInlineInviteRecaptcha(email) which passes email to the component.
|
|
12
|
-
*/
|
|
13
|
-
export var InlineInviteRecaptchaContainer = function InlineInviteRecaptchaContainer(_ref) {
|
|
14
|
-
var _api$mention2, _api$core3;
|
|
15
|
-
var mentionProvider = _ref.mentionProvider,
|
|
16
|
-
api = _ref.api;
|
|
17
|
-
var _useState = useState(null),
|
|
18
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
19
|
-
provider = _useState2[0],
|
|
20
|
-
setProvider = _useState2[1];
|
|
21
|
-
useEffect(function () {
|
|
22
|
-
if (!mentionProvider) {
|
|
23
|
-
return;
|
|
24
|
-
}
|
|
25
|
-
var isMounted = true;
|
|
26
|
-
mentionProvider.then(function (resolvedProvider) {
|
|
27
|
-
if (!isMounted) {
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
setProvider(resolvedProvider);
|
|
31
|
-
}).catch(function () {
|
|
32
|
-
// Silently handle promise rejection
|
|
33
|
-
});
|
|
34
|
-
return function () {
|
|
35
|
-
isMounted = false;
|
|
36
|
-
setProvider(null);
|
|
37
|
-
};
|
|
38
|
-
}, [mentionProvider]);
|
|
39
|
-
var handleSuccess = useCallback(function (userId, email) {
|
|
40
|
-
var _api$mention, _api$core;
|
|
41
|
-
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)) {
|
|
42
|
-
return;
|
|
43
|
-
}
|
|
44
|
-
var name = email.split('@')[0] || email;
|
|
45
|
-
api.core.actions.execute(api.mention.commands.insertMention({
|
|
46
|
-
id: userId,
|
|
47
|
-
name: name,
|
|
48
|
-
userType: 'DEFAULT',
|
|
49
|
-
accessLevel: 'CONTAINER'
|
|
50
|
-
}));
|
|
51
|
-
api.core.actions.execute(function (_ref2) {
|
|
52
|
-
var tr = _ref2.tr;
|
|
53
|
-
tr.setMeta(mentionPlaceholderPluginKey, {
|
|
54
|
-
action: MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER
|
|
55
|
-
});
|
|
56
|
-
return tr;
|
|
57
|
-
});
|
|
58
|
-
}, [api]);
|
|
59
|
-
var handleClose = useCallback(function () {
|
|
60
|
-
var _api$core2;
|
|
61
|
-
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)) {
|
|
62
|
-
return;
|
|
63
|
-
}
|
|
64
|
-
api.core.actions.execute(function (_ref3) {
|
|
65
|
-
var tr = _ref3.tr;
|
|
66
|
-
tr.setMeta(mentionPlaceholderPluginKey, {
|
|
67
|
-
action: MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER
|
|
68
|
-
});
|
|
69
|
-
return tr;
|
|
70
|
-
});
|
|
71
|
-
}, [api]);
|
|
72
|
-
var handleReady = useCallback(function (showRecaptcha) {
|
|
73
|
-
if (provider) {
|
|
74
|
-
if (showRecaptcha) {
|
|
75
|
-
provider.showInlineInviteRecaptcha = showRecaptcha;
|
|
76
|
-
} else {
|
|
77
|
-
delete provider.showInlineInviteRecaptcha;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
}, [provider]);
|
|
81
|
-
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)) {
|
|
82
|
-
return null;
|
|
83
|
-
}
|
|
84
|
-
var RecaptchaComponent = provider.InlineInviteRecaptcha;
|
|
85
|
-
return /*#__PURE__*/React.createElement(RecaptchaComponent, {
|
|
86
|
-
analyticsSource: MENTION_SOURCE,
|
|
87
|
-
onSuccess: handleSuccess,
|
|
88
|
-
onClose: handleClose,
|
|
89
|
-
onReady: handleReady
|
|
90
|
-
});
|
|
91
|
-
};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
-
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
-
export declare const mentionPlaceholderPluginKey: PluginKey;
|
|
4
|
-
export declare const MENTION_PLACEHOLDER_ACTIONS: {
|
|
5
|
-
SHOW_PLACEHOLDER: string;
|
|
6
|
-
HIDE_PLACEHOLDER: string;
|
|
7
|
-
};
|
|
8
|
-
export type MentionPlaceholderPluginState = {
|
|
9
|
-
placeholder?: string;
|
|
10
|
-
};
|
|
11
|
-
export declare function createMentionPlaceholderPlugin(): SafePlugin<{}>;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
2
|
-
import type { MentionProvider } from '@atlaskit/mention/resource';
|
|
3
|
-
import type { MentionsPlugin } from '../mentionsPluginType';
|
|
4
|
-
interface Props {
|
|
5
|
-
api: ExtractInjectionAPI<MentionsPlugin> | undefined;
|
|
6
|
-
mentionProvider: Promise<MentionProvider> | undefined;
|
|
7
|
-
}
|
|
8
|
-
/**
|
|
9
|
-
* Container that renders the recaptcha component from the mention provider and manages handleSuccess.
|
|
10
|
-
* Does NOT pass email - the provider's component uses useInlineInviteRecaptcha hook internally
|
|
11
|
-
* and wires showRecaptcha to the provider. When user clicks invite item, type-ahead calls
|
|
12
|
-
* mentionProvider.showInlineInviteRecaptcha(email) which passes email to the component.
|
|
13
|
-
*/
|
|
14
|
-
export declare const InlineInviteRecaptchaContainer: ({ mentionProvider, api, }: Props) => JSX.Element | null;
|
|
15
|
-
export {};
|