@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
@@ -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 {};