@atlaskit/editor-plugin-mentions 1.4.1 → 1.5.1

package/dist/esm/ui/Mention/mention.js

@@ -0,0 +1,173 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect, useState } from 'react';
+import { MentionWithProfileCard } from '@atlaskit/editor-common/mention';
+import { browser } from '@atlaskit/editor-common/utils';
+import { ResourcedMention } from '@atlaskit/mention/element';
+import { isResolvingMentionProvider, MentionNameStatus } from '@atlaskit/mention/resource';
+import { isPromise } from '@atlaskit/mention/types';
+
+// Workaround for a firefox issue where dom selection is off sync
+// https://product-fabric.atlassian.net/browse/ED-12442
+var refreshBrowserSelection = function refreshBrowserSelection() {
+  var domSelection = window.getSelection();
+  if (domSelection) {
+    var domRange = domSelection && domSelection.rangeCount === 1 && domSelection.getRangeAt(0).cloneRange();
+    if (domRange) {
+      domSelection.removeAllRanges();
+      domSelection.addRange(domRange);
+    }
+  }
+};
+/**
+ * This is the new preferred way to render mentions in the editor.
+ * Introduced behind the `platform.editor.mentions-in-editor-popup-on-click` feature flag.
+ */
+export var Mention = function Mention(props) {
+  var accessLevel = props.accessLevel,
+    eventHandlers = props.eventHandlers,
+    id = props.id,
+    text = props.text,
+    localId = props.localId,
+    mentionProvider = props.mentionProvider,
+    profilecardProviderPromise = props.profilecardProvider;
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    profilecardProvider = _useState2[0],
+    setProfilecardProvider = _useState2[1];
+  var resolvedName = useResolvedName(id, text, mentionProvider);
+
+  // Resolve the profilecard provider
+  useEffect(function () {
+    var isCancelled = false;
+    var resolveProfilecardProvider = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var _profilecardProvider;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return profilecardProviderPromise;
+            case 3:
+              _profilecardProvider = _context.sent;
+              if (!isCancelled) {
+                setProfilecardProvider(_profilecardProvider);
+              }
+              _context.next = 10;
+              break;
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              if (!isCancelled) {
+                setProfilecardProvider(undefined);
+              }
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 7]]);
+      }));
+      return function resolveProfilecardProvider() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    if (profilecardProviderPromise) {
+      resolveProfilecardProvider();
+    }
+    return function () {
+      isCancelled = true;
+    };
+  }, [profilecardProviderPromise]);
+  useEffect(function () {
+    // Workaround an issue where the selection is not updated immediately after adding
+    // a mention when "sanitizePrivateContent" is enabled in the editor on safari.
+    // This affects both insertion and paste behaviour it is applied to the component.
+    // https://product-fabric.atlassian.net/browse/ED-14859
+    if (browser.safari) {
+      setTimeout(refreshBrowserSelection, 0);
+    }
+  }, []);
+  var actionHandlers = {};
+  ['onClick', 'onMouseEnter', 'onMouseLeave'].forEach(function (handler) {
+    actionHandlers[handler] = eventHandlers && eventHandlers[handler] || function () {};
+  });
+  if (profilecardProvider) {
+    return /*#__PURE__*/React.createElement(MentionWithProfileCard, _extends({
+      id: id,
+      text: resolvedName,
+      accessLevel: accessLevel,
+      mentionProvider: mentionProvider,
+      profilecardProvider: profilecardProvider,
+      localId: localId
+    }, actionHandlers));
+  } else {
+    return /*#__PURE__*/React.createElement(ResourcedMention, _extends({
+      id: id,
+      text: resolvedName,
+      accessLevel: accessLevel,
+      mentionProvider: mentionProvider,
+      localId: localId
+    }, actionHandlers));
+  }
+};
+var useResolvedName = function useResolvedName(id, text, mentionProvider) {
+  var _useState3 = useState(text),
+    _useState4 = _slicedToArray(_useState3, 2),
+    resolvedName = _useState4[0],
+    setResolvedName = _useState4[1];
+  var processName = function processName(name) {
+    if (name.status === MentionNameStatus.OK) {
+      return "@".concat(name.name || '');
+    } else {
+      return "@_|unknown|_";
+    }
+  };
+  useEffect(function () {
+    if (mentionProvider) {
+      mentionProvider.then( /*#__PURE__*/function () {
+        var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(provider) {
+          var nameDetail;
+          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                if (!(!text && isResolvingMentionProvider(provider))) {
+                  _context2.next = 13;
+                  break;
+                }
+                nameDetail = provider.resolveMentionName(id);
+                if (!isPromise(nameDetail)) {
+                  _context2.next = 10;
+                  break;
+                }
+                _context2.t0 = processName;
+                _context2.next = 6;
+                return nameDetail;
+              case 6:
+                _context2.t1 = _context2.sent;
+                return _context2.abrupt("return", (0, _context2.t0)(_context2.t1));
+              case 10:
+                return _context2.abrupt("return", processName(nameDetail));
+              case 11:
+                _context2.next = 14;
+                break;
+              case 13:
+                return _context2.abrupt("return", text);
+              case 14:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        return function (_x) {
+          return _ref2.apply(this, arguments);
+        };
+      }()).then(function (resolvedName) {
+        setResolvedName(resolvedName);
+      });
+    }
+  }, [id, text, mentionProvider]);
+  return resolvedName;
+};

package/dist/types/types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { AnalyticsEventPayload } from '@atlaskit/analytics-next';
+import { type ProfilecardProvider } from '@atlaskit/editor-common/src/provider-factory/profile-card-provider';
 import type { NextEditorPlugin, OptionalPlugin, TypeAheadHandler } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { ContextIdentifierPlugin } from '@atlaskit/editor-plugin-context-identifier';
@@ -13,6 +14,7 @@ export interface TeamInfoAttrAnalytics {
 export interface MentionPluginConfig {
     HighlightComponent?: React.ComponentType<React.PropsWithChildren<unknown>>;
     insertDisplayName?: boolean;
+    profilecardProvider?: Promise<ProfilecardProvider>;
 }
 export interface MentionPluginOptions extends MentionPluginConfig {
     sanitizePrivateContent?: boolean;

package/dist/types/ui/Mention/index.d.ts

@@ -9,6 +9,10 @@ export interface MentionProps {
     accessLevel?: string;
     localId?: string;
 }
+/**
+ * @deprecated should be replaced with `editor-plugin-mentions/src/ui/Mention/mention.tsx`
+ * when the feature flag `platform.editor.mentions-in-editor-popup-on-click` is tidied up.
+ */
 export default class Mention extends PureComponent<MentionProps, {}> {
     static displayName: string;
     private providerFactory;

package/dist/types/ui/Mention/mention.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { type ProfilecardProvider } from '@atlaskit/editor-common/src/provider-factory/profile-card-provider';
+import type { MentionEventHandlers } from '@atlaskit/editor-common/ui';
+import { type MentionProvider } from '@atlaskit/mention/resource';
+export interface MentionProps {
+    id: string;
+    eventHandlers?: MentionEventHandlers;
+    text: string;
+    accessLevel?: string;
+    localId?: string;
+    mentionProvider?: Promise<MentionProvider>;
+    profilecardProvider?: Promise<ProfilecardProvider>;
+}
+/**
+ * This is the new preferred way to render mentions in the editor.
+ * Introduced behind the `platform.editor.mentions-in-editor-popup-on-click` feature flag.
+ */
+export declare const Mention: (props: MentionProps) => JSX.Element;

package/dist/types-ts4.5/types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { AnalyticsEventPayload } from '@atlaskit/analytics-next';
+import { type ProfilecardProvider } from '@atlaskit/editor-common/src/provider-factory/profile-card-provider';
 import type { NextEditorPlugin, OptionalPlugin, TypeAheadHandler } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { ContextIdentifierPlugin } from '@atlaskit/editor-plugin-context-identifier';
@@ -13,6 +14,7 @@ export interface TeamInfoAttrAnalytics {
 export interface MentionPluginConfig {
     HighlightComponent?: React.ComponentType<React.PropsWithChildren<unknown>>;
     insertDisplayName?: boolean;
+    profilecardProvider?: Promise<ProfilecardProvider>;
 }
 export interface MentionPluginOptions extends MentionPluginConfig {
     sanitizePrivateContent?: boolean;

package/dist/types-ts4.5/ui/Mention/index.d.ts

@@ -9,6 +9,10 @@ export interface MentionProps {
     accessLevel?: string;
     localId?: string;
 }
+/**
+ * @deprecated should be replaced with `editor-plugin-mentions/src/ui/Mention/mention.tsx`
+ * when the feature flag `platform.editor.mentions-in-editor-popup-on-click` is tidied up.
+ */
 export default class Mention extends PureComponent<MentionProps, {}> {
     static displayName: string;
     private providerFactory;

package/dist/types-ts4.5/ui/Mention/mention.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { type ProfilecardProvider } from '@atlaskit/editor-common/src/provider-factory/profile-card-provider';
+import type { MentionEventHandlers } from '@atlaskit/editor-common/ui';
+import { type MentionProvider } from '@atlaskit/mention/resource';
+export interface MentionProps {
+    id: string;
+    eventHandlers?: MentionEventHandlers;
+    text: string;
+    accessLevel?: string;
+    localId?: string;
+    mentionProvider?: Promise<MentionProvider>;
+    profilecardProvider?: Promise<ProfilecardProvider>;
+}
+/**
+ * This is the new preferred way to render mentions in the editor.
+ * Introduced behind the `platform.editor.mentions-in-editor-popup-on-click` feature flag.
+ */
+export declare const Mention: (props: MentionProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-mentions",
-  "version": "1.4.1",
+  "version": "1.5.1",
   "description": "Mentions plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,13 +35,14 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^36.10.7",
     "@atlaskit/analytics-gas-types": "^5.1.0",
-    "@atlaskit/editor-common": "^81.0.0",
+    "@atlaskit/editor-common": "^82.0.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",
     "@atlaskit/editor-plugin-context-identifier": "^1.1.0",
     "@atlaskit/editor-plugin-type-ahead": "^1.2.0",
     "@atlaskit/editor-prosemirror": "4.0.1",
     "@atlaskit/icon": "^22.3.0",
-    "@atlaskit/mention": "^23.0.0",
+    "@atlaskit/mention": "^23.1.0",
+    "@atlaskit/platform-feature-flags": "^0.2.5",
     "@atlaskit/theme": "^12.8.0",
     "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
@@ -57,7 +58,6 @@
     "@af/visual-regression": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
-    "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@testing-library/react": "^12.1.5",
     "react-dom": "^16.8.0",
     "typescript": "~5.4.2",
@@ -104,5 +104,9 @@
       "@atlassian/tangerine/project-structure"
     ]
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+  "platform-feature-flags": {
+    "platform.editor.mentions-in-editor-popup-on-click": {
+      "type": "boolean"
+    }
+  }
 }

package/report.api.md

@@ -2,7 +2,8 @@
 
 ## API Report File for "@atlaskit/editor-plugin-mentions"
 
-> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated using
+> [API Extractor](https://api-extractor.com/).
 > [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ### Table of contents
@@ -29,44 +30,44 @@ import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
 
 // @public (undocumented)
 export interface MentionPluginConfig {
-  // (undocumented)
-  HighlightComponent?: React.ComponentType;
-  // (undocumented)
-  insertDisplayName?: boolean;
+	// (undocumented)
+	HighlightComponent?: React.ComponentType;
+	// (undocumented)
+	insertDisplayName?: boolean;
 }
 
 // @public (undocumented)
 interface MentionPluginOptions extends MentionPluginConfig {
-  // (undocumented)
-  allowZeroWidthSpaceAfter?: boolean;
-  // (undocumented)
-  sanitizePrivateContent?: boolean;
+	// (undocumented)
+	allowZeroWidthSpaceAfter?: boolean;
+	// (undocumented)
+	sanitizePrivateContent?: boolean;
 }
 
 // @public (undocumented)
 type MentionPluginState = {
-  mentionProvider?: MentionProvider;
-  contextIdentifierProvider?: ContextIdentifierProvider;
-  mentions?: Array<MentionDescription>;
-  canInsertMention?: boolean;
+	mentionProvider?: MentionProvider;
+	contextIdentifierProvider?: ContextIdentifierProvider;
+	mentions?: Array<MentionDescription>;
+	canInsertMention?: boolean;
 };
 
 // @public (undocumented)
 type MentionSharedState = MentionPluginState & {
-  typeAheadHandler: TypeAheadHandler;
+	typeAheadHandler: TypeAheadHandler;
 };
 
 // @public (undocumented)
 export type MentionsPlugin = NextEditorPlugin<
-  'mention',
-  {
-    pluginConfiguration: MentionPluginOptions | undefined;
-    dependencies: [OptionalPlugin<AnalyticsPlugin>, TypeAheadPlugin];
-    sharedState: MentionSharedState | undefined;
-    actions: {
-      openTypeAhead: (inputMethod: TypeAheadInputMethod) => boolean;
-    };
-  }
+	'mention',
+	{
+		pluginConfiguration: MentionPluginOptions | undefined;
+		dependencies: [OptionalPlugin<AnalyticsPlugin>, TypeAheadPlugin];
+		sharedState: MentionSharedState | undefined;
+		actions: {
+			openTypeAhead: (inputMethod: TypeAheadInputMethod) => boolean;
+		};
+	}
 >;
 
 // @public (undocumented)
@@ -83,9 +84,9 @@ export const mentionsPlugin: MentionsPlugin;
 
 ```json
 {
-  "react": "^16.8.0",
-  "react-dom": "^16.8.0",
-  "react-intl-next": "npm:react-intl@^5.18.1"
+	"react": "^16.8.0",
+	"react-dom": "^16.8.0",
+	"react-intl-next": "npm:react-intl@^5.18.1"
 }
 ```