@atlaskit/editor-plugin-mentions 18.0.3 → 18.0.5

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-mentions
 
+## 18.0.5
+
+### Patch Changes
+
+- [`d82ea790b5c1c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d82ea790b5c1c) -
+  Update registered slash-command menu icons, including the Jira datasource WorkItems icon, when the
+  `platform_editor_slash_command` experiment is enabled.
+- [`74776a3f5b320`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/74776a3f5b320) -
+  Fix the agent profile card in the mentions typeahead overlapping with the scrollbar
+- Updated dependencies
+
+## 18.0.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 18.0.3
 
 ### Patch Changes

package/dist/cjs/pm-plugins/main.js

@@ -67,7 +67,7 @@ var AI_STREAMING_TRANSFORMATION_META_KEY = 'isAIStreamingTransformation';
 var AGENT_MENTION_INACTIVITY_MS = 3000;
 var MAX_PENDING_TYPED_AGENT_MENTION_FOCUS_DEFERS = 20;
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "18.0.2";
+var PACKAGE_VERSION = "18.0.4";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/cjs/ui/quick-insert/MentionQuickInsertMenuItem.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,8 +10,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
-var _assets = require("@atlaskit/editor-common/assets");
 var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
+var _mention = _interopRequireDefault(require("@atlaskit/icon/core/mention"));
 var _key = require("../../pm-plugins/key");
 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); }
 var MentionQuickInsertMenuItem = exports.MentionQuickInsertMenuItem = function MentionQuickInsertMenuItem(_ref) {
@@ -33,7 +34,9 @@ var MentionQuickInsertMenuItem = exports.MentionQuickInsertMenuItem = function M
     return tr;
   }, [api, typeAhead]);
   return /*#__PURE__*/_react.default.createElement(_menuItem.QuickInsertMenuItem, {
-    iconBefore: /*#__PURE__*/_react.default.createElement(_assets.IconMention, null),
+    iconBefore: /*#__PURE__*/_react.default.createElement(_mention.default, {
+      label: ""
+    }),
     onSelect: onSelect,
     shortcut: "@",
     title: formatMessage(_messages.toolbarInsertBlockMessages.mention)

package/dist/cjs/ui/type-ahead/MentionItemWithProfileCard.js

@@ -9,6 +9,7 @@ exports.MentionItemWithProfileCard = MentionItemWithProfileCard;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _item = require("@atlaskit/mention/item");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _ProfileCardComponent = require("../ProfileCardComponent");
 var _utils = require("./utils");
@@ -16,6 +17,19 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // Delay before mounting the card and fetching the profile data
 var SHOW_DELAY_MS = 600;
 var HIDE_DELAY_MS = 200;
+// Gap between the typeahead row and the profile card
+var CARD_GAP_PX = 8;
+function getScrollbarWidth(row) {
+  var node = row;
+  while (node) {
+    var style = getComputedStyle(node);
+    if ((style.overflowY === 'auto' || style.overflowY === 'scroll') && node.scrollHeight > node.clientHeight) {
+      return Math.max(0, node.offsetWidth - node.clientWidth);
+    }
+    node = node.parentElement;
+  }
+  return 0;
+}
 /**
  * Renders a mentions typeahead row that shows a (reduced) profile card
  * when hovered
@@ -82,6 +96,14 @@ function MentionItemWithProfileCard(_ref) {
       }
     };
   }, [mention.id, mention.name, mention.accessLevel, userType]);
+
+  // If there's a scrollbar, position the card with a gap to it
+  var offset = (0, _react.useMemo)(function () {
+    if (!referenceElement || !(0, _fg.fg)('platform_editor_typeahead_profilecard_scrollbar')) {
+      return undefined;
+    }
+    return [0, CARD_GAP_PX + getScrollbarWidth(referenceElement)];
+  }, [referenceElement]);
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     testId: "mention-item-with-profile-card",
     onMouseOver: cancelHide,
@@ -100,6 +122,7 @@ function MentionItemWithProfileCard(_ref) {
     dom: referenceElement,
     closeComponent: closeCard,
     placement: "right",
+    offset: offset,
     disableFocusTrap: true,
     hideActions: true
   }));

package/dist/es2019/pm-plugins/main.js

@@ -51,7 +51,7 @@ const AI_STREAMING_TRANSFORMATION_META_KEY = 'isAIStreamingTransformation';
 const AGENT_MENTION_INACTIVITY_MS = 3000;
 const MAX_PENDING_TYPED_AGENT_MENTION_FOCUS_DEFERS = 20;
 const PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-const PACKAGE_VERSION = "18.0.2";
+const PACKAGE_VERSION = "18.0.4";
 const setProvider = provider => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(mentionPluginKey, {

package/dist/es2019/ui/quick-insert/MentionQuickInsertMenuItem.js

@@ -2,8 +2,8 @@ import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import { IconMention } from '@atlaskit/editor-common/assets';
 import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import MentionIcon from '@atlaskit/icon/core/mention';
 import { mentionPluginKey } from '../../pm-plugins/key';
 export const MentionQuickInsertMenuItem = ({
   api,
@@ -28,7 +28,9 @@ export const MentionQuickInsertMenuItem = ({
     return tr;
   }, [api, typeAhead]);
   return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
-    iconBefore: /*#__PURE__*/React.createElement(IconMention, null),
+    iconBefore: /*#__PURE__*/React.createElement(MentionIcon, {
+      label: ""
+    }),
     onSelect: onSelect,
     shortcut: "@",
     title: formatMessage(messages.mention)

package/dist/es2019/ui/type-ahead/MentionItemWithProfileCard.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { MentionItem } from '@atlaskit/mention/item';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Box } from '@atlaskit/primitives/compiled';
 import { ProfileCardComponent } from '../ProfileCardComponent';
 import { isAgentMention } from './utils';
@@ -7,6 +8,19 @@ import { isAgentMention } from './utils';
 // Delay before mounting the card and fetching the profile data
 const SHOW_DELAY_MS = 600;
 const HIDE_DELAY_MS = 200;
+// Gap between the typeahead row and the profile card
+const CARD_GAP_PX = 8;
+function getScrollbarWidth(row) {
+  let node = row;
+  while (node) {
+    const style = getComputedStyle(node);
+    if ((style.overflowY === 'auto' || style.overflowY === 'scroll') && node.scrollHeight > node.clientHeight) {
+      return Math.max(0, node.offsetWidth - node.clientWidth);
+    }
+    node = node.parentElement;
+  }
+  return 0;
+}
 /**
  * Renders a mentions typeahead row that shows a (reduced) profile card
  * when hovered
@@ -67,6 +81,14 @@ export function MentionItemWithProfileCard({
       accessLevel: mention.accessLevel
     }
   }), [mention.id, mention.name, mention.accessLevel, userType]);
+
+  // If there's a scrollbar, position the card with a gap to it
+  const offset = useMemo(() => {
+    if (!referenceElement || !fg('platform_editor_typeahead_profilecard_scrollbar')) {
+      return undefined;
+    }
+    return [0, CARD_GAP_PX + getScrollbarWidth(referenceElement)];
+  }, [referenceElement]);
   return /*#__PURE__*/React.createElement(Box, {
     testId: "mention-item-with-profile-card",
     onMouseOver: cancelHide,
@@ -85,6 +107,7 @@ export function MentionItemWithProfileCard({
     dom: referenceElement,
     closeComponent: closeCard,
     placement: "right",
+    offset: offset,
     disableFocusTrap: true,
     hideActions: true
   }));

package/dist/esm/pm-plugins/main.js

@@ -58,7 +58,7 @@ var AI_STREAMING_TRANSFORMATION_META_KEY = 'isAIStreamingTransformation';
 var AGENT_MENTION_INACTIVITY_MS = 3000;
 var MAX_PENDING_TYPED_AGENT_MENTION_FOCUS_DEFERS = 20;
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "18.0.2";
+var PACKAGE_VERSION = "18.0.4";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/esm/ui/quick-insert/MentionQuickInsertMenuItem.js

@@ -2,8 +2,8 @@ import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import { IconMention } from '@atlaskit/editor-common/assets';
 import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import MentionIcon from '@atlaskit/icon/core/mention';
 import { mentionPluginKey } from '../../pm-plugins/key';
 export var MentionQuickInsertMenuItem = function MentionQuickInsertMenuItem(_ref) {
   var api = _ref.api,
@@ -25,7 +25,9 @@ export var MentionQuickInsertMenuItem = function MentionQuickInsertMenuItem(_ref
     return tr;
   }, [api, typeAhead]);
   return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
-    iconBefore: /*#__PURE__*/React.createElement(IconMention, null),
+    iconBefore: /*#__PURE__*/React.createElement(MentionIcon, {
+      label: ""
+    }),
     onSelect: onSelect,
     shortcut: "@",
     title: formatMessage(messages.mention)

package/dist/esm/ui/type-ahead/MentionItemWithProfileCard.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { MentionItem } from '@atlaskit/mention/item';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Box } from '@atlaskit/primitives/compiled';
 import { ProfileCardComponent } from '../ProfileCardComponent';
 import { isAgentMention } from './utils';
@@ -8,6 +9,19 @@ import { isAgentMention } from './utils';
 // Delay before mounting the card and fetching the profile data
 var SHOW_DELAY_MS = 600;
 var HIDE_DELAY_MS = 200;
+// Gap between the typeahead row and the profile card
+var CARD_GAP_PX = 8;
+function getScrollbarWidth(row) {
+  var node = row;
+  while (node) {
+    var style = getComputedStyle(node);
+    if ((style.overflowY === 'auto' || style.overflowY === 'scroll') && node.scrollHeight > node.clientHeight) {
+      return Math.max(0, node.offsetWidth - node.clientWidth);
+    }
+    node = node.parentElement;
+  }
+  return 0;
+}
 /**
  * Renders a mentions typeahead row that shows a (reduced) profile card
  * when hovered
@@ -74,6 +88,14 @@ export function MentionItemWithProfileCard(_ref) {
       }
     };
   }, [mention.id, mention.name, mention.accessLevel, userType]);
+
+  // If there's a scrollbar, position the card with a gap to it
+  var offset = useMemo(function () {
+    if (!referenceElement || !fg('platform_editor_typeahead_profilecard_scrollbar')) {
+      return undefined;
+    }
+    return [0, CARD_GAP_PX + getScrollbarWidth(referenceElement)];
+  }, [referenceElement]);
   return /*#__PURE__*/React.createElement(Box, {
     testId: "mention-item-with-profile-card",
     onMouseOver: cancelHide,
@@ -92,6 +114,7 @@ export function MentionItemWithProfileCard(_ref) {
     dom: referenceElement,
     closeComponent: closeCard,
     placement: "right",
+    offset: offset,
     disableFocusTrap: true,
     hideActions: true
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "18.0.3",
+	"version": "18.0.5",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -47,7 +47,7 @@
 		"@atlaskit/section-message": "^10.1.0",
 		"@atlaskit/teams-app-config": "^3.0.0",
 		"@atlaskit/theme": "^28.1.0",
-		"@atlaskit/tmp-editor-statsig": "^161.0.0",
+		"@atlaskit/tmp-editor-statsig": "^162.0.0",
 		"@atlaskit/tokens": "^16.8.0",
 		"@atlaskit/tooltip": "^24.2.0",
 		"@atlaskit/user-picker": "^13.10.0",
@@ -59,7 +59,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^120.1.0",
+		"@atlaskit/editor-common": "^120.3.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -132,6 +132,9 @@
 		"platform_editor_mention_typeahead_profilecard": {
 			"type": "boolean"
 		},
+		"platform_editor_typeahead_profilecard_scrollbar": {
+			"type": "boolean"
+		},
 		"platform_editor_agent_mentions_invite_order": {
 			"type": "boolean"
 		},