@atlaskit/editor-plugin-mentions 18.0.4 → 18.0.6

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 (11) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/pm-plugins/main.js +1 -1
  3. package/dist/cjs/ui/quick-insert/MentionQuickInsertMenuItem.js +5 -2
  4. package/dist/cjs/ui/type-ahead/MentionItemWithProfileCard.js +23 -0
  5. package/dist/es2019/pm-plugins/main.js +1 -1
  6. package/dist/es2019/ui/quick-insert/MentionQuickInsertMenuItem.js +4 -2
  7. package/dist/es2019/ui/type-ahead/MentionItemWithProfileCard.js +23 -0
  8. package/dist/esm/pm-plugins/main.js +1 -1
  9. package/dist/esm/ui/quick-insert/MentionQuickInsertMenuItem.js +4 -2
  10. package/dist/esm/ui/type-ahead/MentionItemWithProfileCard.js +23 -0
  11. package/package.json +9 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/editor-plugin-mentions
2
2
 
3
+ ## 18.0.6
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 18.0.5
10
+
11
+ ### Patch Changes
12
+
13
+ - [`d82ea790b5c1c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d82ea790b5c1c) -
14
+ Update registered slash-command menu icons, including the Jira datasource WorkItems icon, when the
15
+ `platform_editor_slash_command` experiment is enabled.
16
+ - [`74776a3f5b320`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/74776a3f5b320) -
17
+ Fix the agent profile card in the mentions typeahead overlapping with the scrollbar
18
+ - Updated dependencies
19
+
3
20
  ## 18.0.4
4
21
 
5
22
  ### Patch Changes
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -67,7 +67,7 @@ var AI_STREAMING_TRANSFORMATION_META_KEY = 'isAIStreamingTransformation';
67
67
  var AGENT_MENTION_INACTIVITY_MS = 3000;
68
68
  var MAX_PENDING_TYPED_AGENT_MENTION_FOCUS_DEFERS = 20;
69
69
  var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
70
- var PACKAGE_VERSION = "18.0.3";
70
+ var PACKAGE_VERSION = "18.0.5";
71
71
  var setProvider = function setProvider(provider) {
72
72
  return function (state, dispatch) {
73
73
  if (dispatch) {
package/dist/cjs/ui/quick-insert/MentionQuickInsertMenuItem.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
3
4
  var _typeof = require("@babel/runtime/helpers/typeof");
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
@@ -9,8 +10,8 @@ var _react = _interopRequireWildcard(require("react"));
9
10
  var _reactIntl = require("react-intl");
10
11
  var _analytics = require("@atlaskit/editor-common/analytics");
11
12
  var _messages = require("@atlaskit/editor-common/messages");
12
- var _assets = require("@atlaskit/editor-common/assets");
13
13
  var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
14
+ var _mention = _interopRequireDefault(require("@atlaskit/icon/core/mention"));
14
15
  var _key = require("../../pm-plugins/key");
15
16
  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
  var MentionQuickInsertMenuItem = exports.MentionQuickInsertMenuItem = function MentionQuickInsertMenuItem(_ref) {
@@ -33,7 +34,9 @@ var MentionQuickInsertMenuItem = exports.MentionQuickInsertMenuItem = function M
33
34
  return tr;
34
35
  }, [api, typeAhead]);
35
36
  return /*#__PURE__*/_react.default.createElement(_menuItem.QuickInsertMenuItem, {
36
- iconBefore: /*#__PURE__*/_react.default.createElement(_assets.IconMention, null),
37
+ iconBefore: /*#__PURE__*/_react.default.createElement(_mention.default, {
38
+ label: ""
39
+ }),
37
40
  onSelect: onSelect,
38
41
  shortcut: "@",
39
42
  title: formatMessage(_messages.toolbarInsertBlockMessages.mention)
package/dist/cjs/ui/type-ahead/MentionItemWithProfileCard.js CHANGED
@@ -9,6 +9,7 @@ exports.MentionItemWithProfileCard = MentionItemWithProfileCard;
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _item = require("@atlaskit/mention/item");
12
+ var _fg = require("@atlaskit/platform-feature-flags/fg");
12
13
  var _compiled = require("@atlaskit/primitives/compiled");
13
14
  var _ProfileCardComponent = require("../ProfileCardComponent");
14
15
  var _utils = require("./utils");
@@ -16,6 +17,19 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
16
17
  // Delay before mounting the card and fetching the profile data
17
18
  var SHOW_DELAY_MS = 600;
18
19
  var HIDE_DELAY_MS = 200;
20
+ // Gap between the typeahead row and the profile card
21
+ var CARD_GAP_PX = 8;
22
+ function getScrollbarWidth(row) {
23
+ var node = row;
24
+ while (node) {
25
+ var style = getComputedStyle(node);
26
+ if ((style.overflowY === 'auto' || style.overflowY === 'scroll') && node.scrollHeight > node.clientHeight) {
27
+ return Math.max(0, node.offsetWidth - node.clientWidth);
28
+ }
29
+ node = node.parentElement;
30
+ }
31
+ return 0;
32
+ }
19
33
  /**
20
34
  * Renders a mentions typeahead row that shows a (reduced) profile card
21
35
  * when hovered
@@ -82,6 +96,14 @@ function MentionItemWithProfileCard(_ref) {
82
96
  }
83
97
  };
84
98
  }, [mention.id, mention.name, mention.accessLevel, userType]);
99
+
100
+ // If there's a scrollbar, position the card with a gap to it
101
+ var offset = (0, _react.useMemo)(function () {
102
+ if (!referenceElement || !(0, _fg.fg)('platform_editor_typeahead_profilecard_scrollbar')) {
103
+ return undefined;
104
+ }
105
+ return [0, CARD_GAP_PX + getScrollbarWidth(referenceElement)];
106
+ }, [referenceElement]);
85
107
  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
86
108
  testId: "mention-item-with-profile-card",
87
109
  onMouseOver: cancelHide,
@@ -100,6 +122,7 @@ function MentionItemWithProfileCard(_ref) {
100
122
  dom: referenceElement,
101
123
  closeComponent: closeCard,
102
124
  placement: "right",
125
+ offset: offset,
103
126
  disableFocusTrap: true,
104
127
  hideActions: true
105
128
  }));
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -51,7 +51,7 @@ const AI_STREAMING_TRANSFORMATION_META_KEY = 'isAIStreamingTransformation';
51
51
  const AGENT_MENTION_INACTIVITY_MS = 3000;
52
52
  const MAX_PENDING_TYPED_AGENT_MENTION_FOCUS_DEFERS = 20;
53
53
  const PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
54
- const PACKAGE_VERSION = "18.0.3";
54
+ const PACKAGE_VERSION = "18.0.5";
55
55
  const setProvider = provider => (state, dispatch) => {
56
56
  if (dispatch) {
57
57
  dispatch(state.tr.setMeta(mentionPluginKey, {
package/dist/es2019/ui/quick-insert/MentionQuickInsertMenuItem.js CHANGED
@@ -2,8 +2,8 @@ import React, { useCallback } from 'react';
2
2
  import { useIntl } from 'react-intl';
3
3
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
4
4
  import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
5
- import { IconMention } from '@atlaskit/editor-common/assets';
6
5
  import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
6
+ import MentionIcon from '@atlaskit/icon/core/mention';
7
7
  import { mentionPluginKey } from '../../pm-plugins/key';
8
8
  export const MentionQuickInsertMenuItem = ({
9
9
  api,
@@ -28,7 +28,9 @@ export const MentionQuickInsertMenuItem = ({
28
28
  return tr;
29
29
  }, [api, typeAhead]);
30
30
  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
31
- iconBefore: /*#__PURE__*/React.createElement(IconMention, null),
31
+ iconBefore: /*#__PURE__*/React.createElement(MentionIcon, {
32
+ label: ""
33
+ }),
32
34
  onSelect: onSelect,
33
35
  shortcut: "@",
34
36
  title: formatMessage(messages.mention)
package/dist/es2019/ui/type-ahead/MentionItemWithProfileCard.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
2
2
  import { MentionItem } from '@atlaskit/mention/item';
3
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
3
4
  import { Box } from '@atlaskit/primitives/compiled';
4
5
  import { ProfileCardComponent } from '../ProfileCardComponent';
5
6
  import { isAgentMention } from './utils';
@@ -7,6 +8,19 @@ import { isAgentMention } from './utils';
7
8
  // Delay before mounting the card and fetching the profile data
8
9
  const SHOW_DELAY_MS = 600;
9
10
  const HIDE_DELAY_MS = 200;
11
+ // Gap between the typeahead row and the profile card
12
+ const CARD_GAP_PX = 8;
13
+ function getScrollbarWidth(row) {
14
+ let node = row;
15
+ while (node) {
16
+ const style = getComputedStyle(node);
17
+ if ((style.overflowY === 'auto' || style.overflowY === 'scroll') && node.scrollHeight > node.clientHeight) {
18
+ return Math.max(0, node.offsetWidth - node.clientWidth);
19
+ }
20
+ node = node.parentElement;
21
+ }
22
+ return 0;
23
+ }
10
24
  /**
11
25
  * Renders a mentions typeahead row that shows a (reduced) profile card
12
26
  * when hovered
@@ -67,6 +81,14 @@ export function MentionItemWithProfileCard({
67
81
  accessLevel: mention.accessLevel
68
82
  }
69
83
  }), [mention.id, mention.name, mention.accessLevel, userType]);
84
+
85
+ // If there's a scrollbar, position the card with a gap to it
86
+ const offset = useMemo(() => {
87
+ if (!referenceElement || !fg('platform_editor_typeahead_profilecard_scrollbar')) {
88
+ return undefined;
89
+ }
90
+ return [0, CARD_GAP_PX + getScrollbarWidth(referenceElement)];
91
+ }, [referenceElement]);
70
92
  return /*#__PURE__*/React.createElement(Box, {
71
93
  testId: "mention-item-with-profile-card",
72
94
  onMouseOver: cancelHide,
@@ -85,6 +107,7 @@ export function MentionItemWithProfileCard({
85
107
  dom: referenceElement,
86
108
  closeComponent: closeCard,
87
109
  placement: "right",
110
+ offset: offset,
88
111
  disableFocusTrap: true,
89
112
  hideActions: true
90
113
  }));
package/dist/esm/pm-plugins/main.js CHANGED
@@ -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 = "18.0.3";
61
+ var PACKAGE_VERSION = "18.0.5";
62
62
  var setProvider = function setProvider(provider) {
63
63
  return function (state, dispatch) {
64
64
  if (dispatch) {
package/dist/esm/ui/quick-insert/MentionQuickInsertMenuItem.js CHANGED
@@ -2,8 +2,8 @@ import React, { useCallback } from 'react';
2
2
  import { useIntl } from 'react-intl';
3
3
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
4
4
  import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
5
- import { IconMention } from '@atlaskit/editor-common/assets';
6
5
  import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
6
+ import MentionIcon from '@atlaskit/icon/core/mention';
7
7
  import { mentionPluginKey } from '../../pm-plugins/key';
8
8
  export var MentionQuickInsertMenuItem = function MentionQuickInsertMenuItem(_ref) {
9
9
  var api = _ref.api,
@@ -25,7 +25,9 @@ export var MentionQuickInsertMenuItem = function MentionQuickInsertMenuItem(_ref
25
25
  return tr;
26
26
  }, [api, typeAhead]);
27
27
  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
28
- iconBefore: /*#__PURE__*/React.createElement(IconMention, null),
28
+ iconBefore: /*#__PURE__*/React.createElement(MentionIcon, {
29
+ label: ""
30
+ }),
29
31
  onSelect: onSelect,
30
32
  shortcut: "@",
31
33
  title: formatMessage(messages.mention)
package/dist/esm/ui/type-ahead/MentionItemWithProfileCard.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
3
3
  import { MentionItem } from '@atlaskit/mention/item';
4
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
4
5
  import { Box } from '@atlaskit/primitives/compiled';
5
6
  import { ProfileCardComponent } from '../ProfileCardComponent';
6
7
  import { isAgentMention } from './utils';
@@ -8,6 +9,19 @@ import { isAgentMention } from './utils';
8
9
  // Delay before mounting the card and fetching the profile data
9
10
  var SHOW_DELAY_MS = 600;
10
11
  var HIDE_DELAY_MS = 200;
12
+ // Gap between the typeahead row and the profile card
13
+ var CARD_GAP_PX = 8;
14
+ function getScrollbarWidth(row) {
15
+ var node = row;
16
+ while (node) {
17
+ var style = getComputedStyle(node);
18
+ if ((style.overflowY === 'auto' || style.overflowY === 'scroll') && node.scrollHeight > node.clientHeight) {
19
+ return Math.max(0, node.offsetWidth - node.clientWidth);
20
+ }
21
+ node = node.parentElement;
22
+ }
23
+ return 0;
24
+ }
11
25
  /**
12
26
  * Renders a mentions typeahead row that shows a (reduced) profile card
13
27
  * when hovered
@@ -74,6 +88,14 @@ export function MentionItemWithProfileCard(_ref) {
74
88
  }
75
89
  };
76
90
  }, [mention.id, mention.name, mention.accessLevel, userType]);
91
+
92
+ // If there's a scrollbar, position the card with a gap to it
93
+ var offset = useMemo(function () {
94
+ if (!referenceElement || !fg('platform_editor_typeahead_profilecard_scrollbar')) {
95
+ return undefined;
96
+ }
97
+ return [0, CARD_GAP_PX + getScrollbarWidth(referenceElement)];
98
+ }, [referenceElement]);
77
99
  return /*#__PURE__*/React.createElement(Box, {
78
100
  testId: "mention-item-with-profile-card",
79
101
  onMouseOver: cancelHide,
@@ -92,6 +114,7 @@ export function MentionItemWithProfileCard(_ref) {
92
114
  dom: referenceElement,
93
115
  closeComponent: closeCard,
94
116
  placement: "right",
117
+ offset: offset,
95
118
  disableFocusTrap: true,
96
119
  hideActions: true
97
120
  }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-mentions",
3
- "version": "18.0.4",
3
+ "version": "18.0.6",
4
4
  "description": "Mentions plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -21,8 +21,8 @@
21
21
  ],
22
22
  "atlaskit:src": "src/index.ts",
23
23
  "dependencies": {
24
- "@atlaskit/adf-schema": "^57.1.0",
25
- "@atlaskit/css": "^1.0.0",
24
+ "@atlaskit/adf-schema": "^57.2.0",
25
+ "@atlaskit/css": "^1.1.0",
26
26
  "@atlaskit/editor-json-transformer": "^9.6.0",
27
27
  "@atlaskit/editor-plugin-analytics": "^16.0.0",
28
28
  "@atlaskit/editor-plugin-base": "^17.0.0",
@@ -47,7 +47,7 @@
47
47
  "@atlaskit/section-message": "^10.1.0",
48
48
  "@atlaskit/teams-app-config": "^3.0.0",
49
49
  "@atlaskit/theme": "^28.1.0",
50
- "@atlaskit/tmp-editor-statsig": "^162.0.0",
50
+ "@atlaskit/tmp-editor-statsig": "^163.0.0",
51
51
  "@atlaskit/tokens": "^16.8.0",
52
52
  "@atlaskit/tooltip": "^24.2.0",
53
53
  "@atlaskit/user-picker": "^13.10.0",
@@ -59,14 +59,14 @@
59
59
  "uuid": "^3.1.0"
60
60
  },
61
61
  "peerDependencies": {
62
- "@atlaskit/editor-common": "^120.2.0",
62
+ "@atlaskit/editor-common": "^120.3.0",
63
63
  "react": "^18.2.0 || ^19.2.0",
64
64
  "react-dom": "^18.2.0 || ^19.2.0",
65
65
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
66
66
  },
67
67
  "devDependencies": {
68
68
  "@atlaskit/button": "^25.2.0",
69
- "@atlaskit/editor-core": "^226.0.0",
69
+ "@atlaskit/editor-core": "^226.1.0",
70
70
  "@testing-library/react": "^16.3.0",
71
71
  "react": "^19.2.0",
72
72
  "react-dom": "^19.2.0",
@@ -132,6 +132,9 @@
132
132
  "platform_editor_mention_typeahead_profilecard": {
133
133
  "type": "boolean"
134
134
  },
135
+ "platform_editor_typeahead_profilecard_scrollbar": {
136
+ "type": "boolean"
137
+ },
135
138
  "platform_editor_agent_mentions_invite_order": {
136
139
  "type": "boolean"
137
140
  },