@atlaskit/editor-plugin-type-ahead 23.0.9 → 24.0.1

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 CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/editor-plugin-type-ahead
2
2
 
3
+ ## 24.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`5418de25e5bdb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5418de25e5bdb) -
8
+ Restore pointer interaction for registered slash command typeahead menus behind
9
+ platform_editor_slash_command.
10
+
11
+ ## 24.0.0
12
+
13
+ ### Patch Changes
14
+
15
+ - [`2fbfb8385de67`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2fbfb8385de67) -
16
+ Updates the Rovo skill tag label in the quick-insert typeahead menu to use slanted
17
+ leading/trailing background edges, matching the inserted skill chip, with a fallback to the legacy
18
+ rectangular background behind the `rovo_skill_tag_slanted_background_killswitch` gate.
19
+ - [`c906e2e4ceb34`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c906e2e4ceb34) -
20
+ Clean up experiment `platform_editor_wide_slash_trigger`
21
+ - Updated dependencies
22
+
3
23
  ## 23.0.9
4
24
 
5
25
  ### Patch Changes
@@ -7,7 +7,6 @@ exports.openTypeAheadAtCursor = exports.openTypeAhead = void 0;
7
7
  var _selection = require("@atlaskit/editor-common/selection");
8
8
  var _state = require("@atlaskit/editor-prosemirror/state");
9
9
  var _fg = require("@atlaskit/platform-feature-flags/fg");
10
- var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
11
10
  var _actions = require("../actions");
12
11
  var _key = require("../key");
13
12
  var openTypeAhead = exports.openTypeAhead = function openTypeAhead(props) {
@@ -86,7 +85,7 @@ var openTypeAheadAtCursor = exports.openTypeAheadAtCursor = function openTypeAhe
86
85
  // been eroneously added because we require whitespace/newline for typeahead.
87
86
  // Check if the text ends with the trigger character (or any character matched
88
87
  // by customRegex, to support wide-char variants like fullwidth slash /)
89
- var triggerPattern = (0, _expValEquals.expValEquals)('platform_editor_wide_slash_trigger', 'isEnabled', true) && triggerHandler.customRegex ? new RegExp("(".concat(triggerHandler.customRegex, ")$"), 'u') : null;
88
+ var triggerPattern = triggerHandler.customRegex ? new RegExp("(".concat(triggerHandler.customRegex, ")$"), 'u') : null;
90
89
  var endsWithTrigger = ((_selection$$head$pare = (_selection$$head$pare2 = selection.$head.parent.textContent).endsWith) === null || _selection$$head$pare === void 0 ? void 0 : _selection$$head$pare.call(_selection$$head$pare2, triggerHandler.trigger)) || triggerPattern && triggerPattern.test(selection.$head.parent.textContent);
91
90
  if (cursorPos >= 2 && !!(selection !== null && selection !== void 0 && (_selection$$head = selection.$head) !== null && _selection$$head !== void 0 && (_selection$$head = _selection$$head.parent) !== null && _selection$$head !== void 0 && _selection$$head.textContent) && endsWithTrigger) {
92
91
  tr.delete(cursorPos - 1, cursorPos);
@@ -10,7 +10,6 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
10
10
  var _utils = require("@atlaskit/editor-common/utils");
11
11
  var _view = require("@atlaskit/editor-prosemirror/view");
12
12
  var _fg = require("@atlaskit/platform-feature-flags/fg");
13
- var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
14
13
  var _actions = require("./actions");
15
14
  var _openTypeaheadAtCursor = require("./commands/open-typeahead-at-cursor");
16
15
  var _constants = require("./constants");
@@ -139,31 +138,29 @@ function createPlugin(_ref) {
139
138
  },
140
139
  handleDOMEvents: {
141
140
  compositionupdate: function compositionupdate(view, event) {
142
- // When the experiment is on, track whether the current composition
143
- // exactly matches a wide-char trigger (e.g. / from Japanese keyboard).
141
+ var _event$data, _typeAheadHandlers$fi;
142
+ // Track whether the current composition exactly matches a wide-char
143
+ // trigger (e.g. / from Japanese keyboard).
144
144
  // We can't open the typeahead yet because composition is still active,
145
145
  // but we record the matching handler so the next keydown (Enter) can use it.
146
- if ((0, _expValEquals.expValEquals)('platform_editor_wide_slash_trigger', 'isEnabled', true)) {
147
- var _event$data, _typeAheadHandlers$fi;
148
- var pendingData = (_event$data = event.data) !== null && _event$data !== void 0 ? _event$data : '';
149
- pendingWideSlashHandler = (_typeAheadHandlers$fi = typeAheadHandlers.find(function (handler) {
150
- if (!handler.customRegex) {
151
- return false;
152
- }
153
- // Only match if the composition is a NON-ASCII trigger character.
154
- // ASCII triggers (e.g. '/') are handled by the normal input rule
155
- // path and must NOT be intercepted here — otherwise typing '/' on
156
- // a macOS Japanese IME (which briefly fires compositionupdate with
157
- // data='/') would cause the Enter-confirm to open the typeahead.
158
- // Matches any single ASCII character (U+0000–U+007F).
159
- // No 'u' flag needed for ASCII-only ranges.
160
- if (ASCII_CHAR_REGEX.test(pendingData)) {
161
- return false;
162
- }
163
- var pattern = new RegExp("^(".concat(handler.customRegex, ")$"), 'u');
164
- return pattern.test(pendingData);
165
- })) !== null && _typeAheadHandlers$fi !== void 0 ? _typeAheadHandlers$fi : null;
166
- }
146
+ var pendingData = (_event$data = event.data) !== null && _event$data !== void 0 ? _event$data : '';
147
+ pendingWideSlashHandler = (_typeAheadHandlers$fi = typeAheadHandlers.find(function (handler) {
148
+ if (!handler.customRegex) {
149
+ return false;
150
+ }
151
+ // Only match if the composition is a NON-ASCII trigger character.
152
+ // ASCII triggers (e.g. '/') are handled by the normal input rule
153
+ // path and must NOT be intercepted here — otherwise typing '/' on
154
+ // a macOS Japanese IME (which briefly fires compositionupdate with
155
+ // data='/') would cause the Enter-confirm to open the typeahead.
156
+ // Matches any single ASCII character (U+0000–U+007F).
157
+ // No 'u' flag needed for ASCII-only ranges.
158
+ if (ASCII_CHAR_REGEX.test(pendingData)) {
159
+ return false;
160
+ }
161
+ var pattern = new RegExp("^(".concat(handler.customRegex, ")$"), 'u');
162
+ return pattern.test(pendingData);
163
+ })) !== null && _typeAheadHandlers$fi !== void 0 ? _typeAheadHandlers$fi : null;
167
164
  return false;
168
165
  },
169
166
  compositionend: function compositionend(view, event) {
@@ -4,6 +4,8 @@
4
4
  ._1e0c1nu9{display:inline}
5
5
  ._2hwx1b66{margin-right:var(--ds-space-050,4px)}
6
6
  ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
7
+ ._mkrz1f6o{clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}
8
+ ._mkrz1gdk{clip-path:polygon(0 0,100% 0,80% 100%,0 100%)}
7
9
  ._syaz16jw{color:var(--ds-text-accent-blue,#1558bc)}
8
10
  ._syaz17qg{color:var(--ds-text-accent-teal,#206a83)}
9
11
  ._syaz1s8m{color:var(--ds-text-accent-magenta,#943d73)}
@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
12
12
  var _runtime = require("@compiled/react/runtime");
13
13
  var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
14
14
  var _css = require("@atlaskit/css");
15
+ var _fg = require("@atlaskit/platform-feature-flags/fg");
15
16
  var _box = require("@atlaskit/primitives/compiled/box");
16
17
  var _text = require("@atlaskit/primitives/compiled/text");
17
18
  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); }
@@ -42,8 +43,13 @@ var parseSkillTagTitle = exports.parseSkillTagTitle = function parseSkillTagTitl
42
43
  };
43
44
  };
44
45
  var styles = {
45
- tag: "_2rkolb4i _1e0c1nu9 _16d9qvcn _vchhusvi _18u01b66 _19bv1b66 _u5f31b66 _bfhki8nm",
46
- slash: "_1e0c1nu9 _2hwx1b66"
46
+ tag: "_1e0c1nu9",
47
+ highlight: "_1e0c1nu9 _16d9qvcn _bfhki8nm",
48
+ highlightStart: "_1e0c1nu9 _19bv1b66 _mkrz1f6o",
49
+ highlightEnd: "_1e0c1nu9 _u5f31b66 _mkrz1gdk",
50
+ slash: "_1e0c1nu9 _u5f31b66",
51
+ legacyTag: "_2rkolb4i _1e0c1nu9 _16d9qvcn _vchhusvi _18u01b66 _19bv1b66 _u5f31b66 _bfhki8nm",
52
+ legacySlash: "_1e0c1nu9 _2hwx1b66"
47
53
  };
48
54
 
49
55
  // Slash accent colors for a Rovo skill, mirroring the enum used by the inserted skill chip
@@ -76,13 +82,34 @@ var SkillTagLabel = exports.SkillTagLabel = function SkillTagLabel(_ref) {
76
82
  var color = _ref.color,
77
83
  slug = _ref.slug;
78
84
  var accentColor = isAccentColor(color) ? color : 'DEFAULT';
85
+ if ((0, _fg.fg)('rovo_skill_tag_slanted_background_killswitch')) {
86
+ return /*#__PURE__*/React.createElement(_box.Box, {
87
+ as: "span",
88
+ xcss: styles.legacyTag,
89
+ testId: "skill-tag-label-container"
90
+ }, /*#__PURE__*/React.createElement(_box.Box, {
91
+ as: "span",
92
+ xcss: (0, _css.cx)(styles.legacySlash, accentColorStyles[accentColor])
93
+ }, "/"), /*#__PURE__*/React.createElement(_text.Text, {
94
+ as: "span"
95
+ }, slug));
96
+ }
97
+ var slugBeforeLastCharacter = slug.slice(0, -1);
98
+ var lastSlugCharacter = slug.slice(-1);
79
99
  return /*#__PURE__*/React.createElement(_box.Box, {
80
100
  as: "span",
81
- xcss: styles.tag
101
+ xcss: styles.tag,
102
+ testId: "skill-tag-label-container"
103
+ }, /*#__PURE__*/React.createElement(_text.Text, {
104
+ as: "span"
82
105
  }, /*#__PURE__*/React.createElement(_box.Box, {
83
106
  as: "span",
84
- xcss: (0, _css.cx)(styles.slash, accentColorStyles[accentColor])
85
- }, "/"), /*#__PURE__*/React.createElement(_text.Text, {
86
- as: "span"
87
- }, slug));
107
+ xcss: (0, _css.cx)(styles.highlight, styles.highlightStart, styles.slash, accentColorStyles[accentColor])
108
+ }, "/"), slugBeforeLastCharacter && /*#__PURE__*/React.createElement(_box.Box, {
109
+ as: "span",
110
+ xcss: styles.highlight
111
+ }, slugBeforeLastCharacter), lastSlugCharacter && /*#__PURE__*/React.createElement(_box.Box, {
112
+ as: "span",
113
+ xcss: (0, _css.cx)(styles.highlight, styles.highlightEnd)
114
+ }, lastSlugCharacter)));
88
115
  };
@@ -1,3 +1,4 @@
1
+ ._19itglyw{border:none}
1
2
  ._2rko1mok{border-radius:var(--ds-radius-large,8px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
2
3
  ._18m915vq{overflow-y:hidden}
3
4
  ._1bsbnklw{width:20pc}
@@ -5,4 +6,5 @@
5
6
  ._1reo15vq{overflow-x:hidden}
6
7
  ._85i512x7{padding-block-end:var(--ds-space-075,6px)}
7
8
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
9
+ ._r06hglyw{-webkit-appearance:none;appearance:none}
8
10
  ._vchhusvi{box-sizing:border-box}
@@ -21,7 +21,6 @@ var _ui = require("@atlaskit/editor-common/ui");
21
21
  var _constants = require("@atlaskit/editor-shared-styles/constants");
22
22
  var _createSurfaceContext = require("@atlaskit/editor-ui-control-model/create-surface-context");
23
23
  var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
24
- var _compiled = require("@atlaskit/primitives/compiled");
25
24
  var _InputQuery = require("../InputQuery");
26
25
  var _getTypeAheadGlobalViewMoreId = require("./getTypeAheadGlobalViewMoreId");
27
26
  var _getTypeAheadItemId = require("./getTypeAheadItemId");
@@ -29,7 +28,7 @@ var _TypeAheadMenuRenderer = require("./TypeAheadMenuRenderer");
29
28
  var _TypeAheadProvider = require("./TypeAheadProvider");
30
29
  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); }
31
30
  var styles = {
32
- menu: "_2rko1mok _1reo15vq _18m915vq _bfhk1bhr _vchhusvi _16qs130s _1q51u2gc _85i512x7 _1bsbnklw"
31
+ menu: "_19itglyw _2rko1mok _1reo15vq _18m915vq _bfhk1bhr _r06hglyw _vchhusvi _16qs130s _1q51u2gc _85i512x7 _1bsbnklw"
33
32
  };
34
33
  var DEFAULT_MENU_MAX_HEIGHT = 480;
35
34
  var MENU_VERTICAL_PADDING = 14;
@@ -188,11 +187,12 @@ var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function Registe
188
187
  scrollableElement: popupsScrollableElement,
189
188
  target: anchorElement,
190
189
  zIndex: _constants.akEditorFloatingDialogZIndex
191
- }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
190
+ }, /*#__PURE__*/_react.default.createElement("div", {
192
191
  ref: menuRef,
192
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Parent overlays use this class to restore pointer interaction.
193
+ className: (0, _runtime.ax)([styles.menu, "fabric-editor-typeahead"]),
193
194
  "data-registered-type-ahead-menu": "",
194
- testId: "registered-type-ahead-menu",
195
- xcss: styles.menu
195
+ "data-testid": "registered-type-ahead-menu"
196
196
  }, /*#__PURE__*/_react.default.createElement(_TypeAheadProvider.TypeAheadProvider, {
197
197
  value: typeAheadContextValue
198
198
  }, /*#__PURE__*/_react.default.createElement(SurfaceProvider, null, /*#__PURE__*/_react.default.createElement(_TypeAheadMenuRenderer.TypeAheadMenuRenderer, {
@@ -1,7 +1,6 @@
1
1
  import { GapCursorSelection } from '@atlaskit/editor-common/selection';
2
2
  import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
3
3
  import { fg } from '@atlaskit/platform-feature-flags/fg';
4
- import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
5
4
  import { ACTIONS } from '../actions';
6
5
  import { pluginKey } from '../key';
7
6
  export const openTypeAhead = props => tr => {
@@ -83,7 +82,7 @@ export const openTypeAheadAtCursor = ({
83
82
  // been eroneously added because we require whitespace/newline for typeahead.
84
83
  // Check if the text ends with the trigger character (or any character matched
85
84
  // by customRegex, to support wide-char variants like fullwidth slash /)
86
- const triggerPattern = expValEquals('platform_editor_wide_slash_trigger', 'isEnabled', true) && triggerHandler.customRegex ? new RegExp(`(${triggerHandler.customRegex})$`, 'u') : null;
85
+ const triggerPattern = triggerHandler.customRegex ? new RegExp(`(${triggerHandler.customRegex})$`, 'u') : null;
87
86
  const endsWithTrigger = ((_selection$$head$pare = (_selection$$head$pare2 = selection.$head.parent.textContent).endsWith) === null || _selection$$head$pare === void 0 ? void 0 : _selection$$head$pare.call(_selection$$head$pare2, triggerHandler.trigger)) || triggerPattern && triggerPattern.test(selection.$head.parent.textContent);
88
87
  if (cursorPos >= 2 && !!(selection !== null && selection !== void 0 && (_selection$$head = selection.$head) !== null && _selection$$head !== void 0 && (_selection$$head$pare3 = _selection$$head.parent) !== null && _selection$$head$pare3 !== void 0 && _selection$$head$pare3.textContent) && endsWithTrigger) {
89
88
  tr.delete(cursorPos - 1, cursorPos);
@@ -4,7 +4,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
4
4
  import { closest } from '@atlaskit/editor-common/utils';
5
5
  import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
6
6
  import { fg } from '@atlaskit/platform-feature-flags/fg';
7
- import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
8
7
  import { ACTIONS } from './actions';
9
8
  import { openTypeAheadAtCursor } from './commands/open-typeahead-at-cursor';
10
9
  import { TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE } from './constants';
@@ -134,31 +133,29 @@ export function createPlugin({
134
133
  },
135
134
  handleDOMEvents: {
136
135
  compositionupdate: (view, event) => {
137
- // When the experiment is on, track whether the current composition
138
- // exactly matches a wide-char trigger (e.g. / from Japanese keyboard).
136
+ var _event$data, _typeAheadHandlers$fi;
137
+ // Track whether the current composition exactly matches a wide-char
138
+ // trigger (e.g. / from Japanese keyboard).
139
139
  // We can't open the typeahead yet because composition is still active,
140
140
  // but we record the matching handler so the next keydown (Enter) can use it.
141
- if (expValEquals('platform_editor_wide_slash_trigger', 'isEnabled', true)) {
142
- var _event$data, _typeAheadHandlers$fi;
143
- const pendingData = (_event$data = event.data) !== null && _event$data !== void 0 ? _event$data : '';
144
- pendingWideSlashHandler = (_typeAheadHandlers$fi = typeAheadHandlers.find(handler => {
145
- if (!handler.customRegex) {
146
- return false;
147
- }
148
- // Only match if the composition is a NON-ASCII trigger character.
149
- // ASCII triggers (e.g. '/') are handled by the normal input rule
150
- // path and must NOT be intercepted here — otherwise typing '/' on
151
- // a macOS Japanese IME (which briefly fires compositionupdate with
152
- // data='/') would cause the Enter-confirm to open the typeahead.
153
- // Matches any single ASCII character (U+0000–U+007F).
154
- // No 'u' flag needed for ASCII-only ranges.
155
- if (ASCII_CHAR_REGEX.test(pendingData)) {
156
- return false;
157
- }
158
- const pattern = new RegExp(`^(${handler.customRegex})$`, 'u');
159
- return pattern.test(pendingData);
160
- })) !== null && _typeAheadHandlers$fi !== void 0 ? _typeAheadHandlers$fi : null;
161
- }
141
+ const pendingData = (_event$data = event.data) !== null && _event$data !== void 0 ? _event$data : '';
142
+ pendingWideSlashHandler = (_typeAheadHandlers$fi = typeAheadHandlers.find(handler => {
143
+ if (!handler.customRegex) {
144
+ return false;
145
+ }
146
+ // Only match if the composition is a NON-ASCII trigger character.
147
+ // ASCII triggers (e.g. '/') are handled by the normal input rule
148
+ // path and must NOT be intercepted here — otherwise typing '/' on
149
+ // a macOS Japanese IME (which briefly fires compositionupdate with
150
+ // data='/') would cause the Enter-confirm to open the typeahead.
151
+ // Matches any single ASCII character (U+0000–U+007F).
152
+ // No 'u' flag needed for ASCII-only ranges.
153
+ if (ASCII_CHAR_REGEX.test(pendingData)) {
154
+ return false;
155
+ }
156
+ const pattern = new RegExp(`^(${handler.customRegex})$`, 'u');
157
+ return pattern.test(pendingData);
158
+ })) !== null && _typeAheadHandlers$fi !== void 0 ? _typeAheadHandlers$fi : null;
162
159
  return false;
163
160
  },
164
161
  compositionend: (view, event) => {
@@ -4,6 +4,8 @@
4
4
  ._1e0c1nu9{display:inline}
5
5
  ._2hwx1b66{margin-right:var(--ds-space-050,4px)}
6
6
  ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
7
+ ._mkrz1f6o{clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}
8
+ ._mkrz1gdk{clip-path:polygon(0 0,100% 0,80% 100%,0 100%)}
7
9
  ._syaz16jw{color:var(--ds-text-accent-blue,#1558bc)}
8
10
  ._syaz17qg{color:var(--ds-text-accent-teal,#206a83)}
9
11
  ._syaz1s8m{color:var(--ds-text-accent-magenta,#943d73)}
@@ -3,6 +3,7 @@ import "./SkillTagLabel.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { cx } from '@atlaskit/css';
6
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
6
7
  import { Box } from '@atlaskit/primitives/compiled/box';
7
8
  import { Text } from '@atlaskit/primitives/compiled/text';
8
9
  const SKILL_TITLE_PREFIX = 'skill::';
@@ -27,8 +28,13 @@ export const parseSkillTagTitle = title => {
27
28
  };
28
29
  };
29
30
  const styles = {
30
- tag: "_2rkolb4i _1e0c1nu9 _16d9qvcn _vchhusvi _18u01b66 _19bv1b66 _u5f31b66 _bfhki8nm",
31
- slash: "_1e0c1nu9 _2hwx1b66"
31
+ tag: "_1e0c1nu9",
32
+ highlight: "_1e0c1nu9 _16d9qvcn _bfhki8nm",
33
+ highlightStart: "_1e0c1nu9 _19bv1b66 _mkrz1f6o",
34
+ highlightEnd: "_1e0c1nu9 _u5f31b66 _mkrz1gdk",
35
+ slash: "_1e0c1nu9 _u5f31b66",
36
+ legacyTag: "_2rkolb4i _1e0c1nu9 _16d9qvcn _vchhusvi _18u01b66 _19bv1b66 _u5f31b66 _bfhki8nm",
37
+ legacySlash: "_1e0c1nu9 _2hwx1b66"
32
38
  };
33
39
 
34
40
  // Slash accent colors for a Rovo skill, mirroring the enum used by the inserted skill chip
@@ -60,13 +66,34 @@ export const SkillTagLabel = ({
60
66
  slug
61
67
  }) => {
62
68
  const accentColor = isAccentColor(color) ? color : 'DEFAULT';
69
+ if (fg('rovo_skill_tag_slanted_background_killswitch')) {
70
+ return /*#__PURE__*/React.createElement(Box, {
71
+ as: "span",
72
+ xcss: styles.legacyTag,
73
+ testId: "skill-tag-label-container"
74
+ }, /*#__PURE__*/React.createElement(Box, {
75
+ as: "span",
76
+ xcss: cx(styles.legacySlash, accentColorStyles[accentColor])
77
+ }, "/"), /*#__PURE__*/React.createElement(Text, {
78
+ as: "span"
79
+ }, slug));
80
+ }
81
+ const slugBeforeLastCharacter = slug.slice(0, -1);
82
+ const lastSlugCharacter = slug.slice(-1);
63
83
  return /*#__PURE__*/React.createElement(Box, {
64
84
  as: "span",
65
- xcss: styles.tag
85
+ xcss: styles.tag,
86
+ testId: "skill-tag-label-container"
87
+ }, /*#__PURE__*/React.createElement(Text, {
88
+ as: "span"
66
89
  }, /*#__PURE__*/React.createElement(Box, {
67
90
  as: "span",
68
- xcss: cx(styles.slash, accentColorStyles[accentColor])
69
- }, "/"), /*#__PURE__*/React.createElement(Text, {
70
- as: "span"
71
- }, slug));
91
+ xcss: cx(styles.highlight, styles.highlightStart, styles.slash, accentColorStyles[accentColor])
92
+ }, "/"), slugBeforeLastCharacter && /*#__PURE__*/React.createElement(Box, {
93
+ as: "span",
94
+ xcss: styles.highlight
95
+ }, slugBeforeLastCharacter), lastSlugCharacter && /*#__PURE__*/React.createElement(Box, {
96
+ as: "span",
97
+ xcss: cx(styles.highlight, styles.highlightEnd)
98
+ }, lastSlugCharacter)));
72
99
  };
@@ -1,3 +1,4 @@
1
+ ._19itglyw{border:none}
1
2
  ._2rko1mok{border-radius:var(--ds-radius-large,8px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
2
3
  ._18m915vq{overflow-y:hidden}
3
4
  ._1bsbnklw{width:20pc}
@@ -5,4 +6,5 @@
5
6
  ._1reo15vq{overflow-x:hidden}
6
7
  ._85i512x7{padding-block-end:var(--ds-space-075,6px)}
7
8
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
9
+ ._r06hglyw{-webkit-appearance:none;appearance:none}
8
10
  ._vchhusvi{box-sizing:border-box}
@@ -11,14 +11,13 @@ import { Popup } from '@atlaskit/editor-common/ui';
11
11
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles/constants';
12
12
  import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
13
13
  import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
14
- import { Box } from '@atlaskit/primitives/compiled';
15
14
  import { InputQuery } from '../InputQuery';
16
15
  import { getTypeAheadGlobalViewMoreId } from './getTypeAheadGlobalViewMoreId';
17
16
  import { getTypeAheadItemId } from './getTypeAheadItemId';
18
17
  import { TypeAheadMenuRenderer } from './TypeAheadMenuRenderer';
19
18
  import { TypeAheadProvider } from './TypeAheadProvider';
20
19
  const styles = {
21
- menu: "_2rko1mok _1reo15vq _18m915vq _bfhk1bhr _vchhusvi _16qs130s _1q51u2gc _85i512x7 _1bsbnklw"
20
+ menu: "_19itglyw _2rko1mok _1reo15vq _18m915vq _bfhk1bhr _r06hglyw _vchhusvi _16qs130s _1q51u2gc _85i512x7 _1bsbnklw"
22
21
  };
23
22
  const DEFAULT_MENU_MAX_HEIGHT = 480;
24
23
  const MENU_VERTICAL_PADDING = 14;
@@ -156,11 +155,12 @@ export const RegisteredTypeAheadMenu = ({
156
155
  scrollableElement: popupsScrollableElement,
157
156
  target: anchorElement,
158
157
  zIndex: akEditorFloatingDialogZIndex
159
- }, /*#__PURE__*/React.createElement(Box, {
158
+ }, /*#__PURE__*/React.createElement("div", {
160
159
  ref: menuRef,
160
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Parent overlays use this class to restore pointer interaction.
161
+ className: ax([styles.menu, "fabric-editor-typeahead"]),
161
162
  "data-registered-type-ahead-menu": "",
162
- testId: "registered-type-ahead-menu",
163
- xcss: styles.menu
163
+ "data-testid": "registered-type-ahead-menu"
164
164
  }, /*#__PURE__*/React.createElement(TypeAheadProvider, {
165
165
  value: typeAheadContextValue
166
166
  }, /*#__PURE__*/React.createElement(SurfaceProvider, null, /*#__PURE__*/React.createElement(TypeAheadMenuRenderer, {
@@ -1,7 +1,6 @@
1
1
  import { GapCursorSelection } from '@atlaskit/editor-common/selection';
2
2
  import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
3
3
  import { fg } from '@atlaskit/platform-feature-flags/fg';
4
- import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
5
4
  import { ACTIONS } from '../actions';
6
5
  import { pluginKey } from '../key';
7
6
  export var openTypeAhead = function openTypeAhead(props) {
@@ -80,7 +79,7 @@ export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
80
79
  // been eroneously added because we require whitespace/newline for typeahead.
81
80
  // Check if the text ends with the trigger character (or any character matched
82
81
  // by customRegex, to support wide-char variants like fullwidth slash /)
83
- var triggerPattern = expValEquals('platform_editor_wide_slash_trigger', 'isEnabled', true) && triggerHandler.customRegex ? new RegExp("(".concat(triggerHandler.customRegex, ")$"), 'u') : null;
82
+ var triggerPattern = triggerHandler.customRegex ? new RegExp("(".concat(triggerHandler.customRegex, ")$"), 'u') : null;
84
83
  var endsWithTrigger = ((_selection$$head$pare = (_selection$$head$pare2 = selection.$head.parent.textContent).endsWith) === null || _selection$$head$pare === void 0 ? void 0 : _selection$$head$pare.call(_selection$$head$pare2, triggerHandler.trigger)) || triggerPattern && triggerPattern.test(selection.$head.parent.textContent);
85
84
  if (cursorPos >= 2 && !!(selection !== null && selection !== void 0 && (_selection$$head = selection.$head) !== null && _selection$$head !== void 0 && (_selection$$head = _selection$$head.parent) !== null && _selection$$head !== void 0 && _selection$$head.textContent) && endsWithTrigger) {
86
85
  tr.delete(cursorPos - 1, cursorPos);
@@ -4,7 +4,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
4
4
  import { closest } from '@atlaskit/editor-common/utils';
5
5
  import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
6
6
  import { fg } from '@atlaskit/platform-feature-flags/fg';
7
- import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
8
7
  import { ACTIONS } from './actions';
9
8
  import { openTypeAheadAtCursor } from './commands/open-typeahead-at-cursor';
10
9
  import { TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE } from './constants';
@@ -134,31 +133,29 @@ export function createPlugin(_ref) {
134
133
  },
135
134
  handleDOMEvents: {
136
135
  compositionupdate: function compositionupdate(view, event) {
137
- // When the experiment is on, track whether the current composition
138
- // exactly matches a wide-char trigger (e.g. / from Japanese keyboard).
136
+ var _event$data, _typeAheadHandlers$fi;
137
+ // Track whether the current composition exactly matches a wide-char
138
+ // trigger (e.g. / from Japanese keyboard).
139
139
  // We can't open the typeahead yet because composition is still active,
140
140
  // but we record the matching handler so the next keydown (Enter) can use it.
141
- if (expValEquals('platform_editor_wide_slash_trigger', 'isEnabled', true)) {
142
- var _event$data, _typeAheadHandlers$fi;
143
- var pendingData = (_event$data = event.data) !== null && _event$data !== void 0 ? _event$data : '';
144
- pendingWideSlashHandler = (_typeAheadHandlers$fi = typeAheadHandlers.find(function (handler) {
145
- if (!handler.customRegex) {
146
- return false;
147
- }
148
- // Only match if the composition is a NON-ASCII trigger character.
149
- // ASCII triggers (e.g. '/') are handled by the normal input rule
150
- // path and must NOT be intercepted here — otherwise typing '/' on
151
- // a macOS Japanese IME (which briefly fires compositionupdate with
152
- // data='/') would cause the Enter-confirm to open the typeahead.
153
- // Matches any single ASCII character (U+0000–U+007F).
154
- // No 'u' flag needed for ASCII-only ranges.
155
- if (ASCII_CHAR_REGEX.test(pendingData)) {
156
- return false;
157
- }
158
- var pattern = new RegExp("^(".concat(handler.customRegex, ")$"), 'u');
159
- return pattern.test(pendingData);
160
- })) !== null && _typeAheadHandlers$fi !== void 0 ? _typeAheadHandlers$fi : null;
161
- }
141
+ var pendingData = (_event$data = event.data) !== null && _event$data !== void 0 ? _event$data : '';
142
+ pendingWideSlashHandler = (_typeAheadHandlers$fi = typeAheadHandlers.find(function (handler) {
143
+ if (!handler.customRegex) {
144
+ return false;
145
+ }
146
+ // Only match if the composition is a NON-ASCII trigger character.
147
+ // ASCII triggers (e.g. '/') are handled by the normal input rule
148
+ // path and must NOT be intercepted here — otherwise typing '/' on
149
+ // a macOS Japanese IME (which briefly fires compositionupdate with
150
+ // data='/') would cause the Enter-confirm to open the typeahead.
151
+ // Matches any single ASCII character (U+0000–U+007F).
152
+ // No 'u' flag needed for ASCII-only ranges.
153
+ if (ASCII_CHAR_REGEX.test(pendingData)) {
154
+ return false;
155
+ }
156
+ var pattern = new RegExp("^(".concat(handler.customRegex, ")$"), 'u');
157
+ return pattern.test(pendingData);
158
+ })) !== null && _typeAheadHandlers$fi !== void 0 ? _typeAheadHandlers$fi : null;
162
159
  return false;
163
160
  },
164
161
  compositionend: function compositionend(view, event) {
@@ -4,6 +4,8 @@
4
4
  ._1e0c1nu9{display:inline}
5
5
  ._2hwx1b66{margin-right:var(--ds-space-050,4px)}
6
6
  ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
7
+ ._mkrz1f6o{clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}
8
+ ._mkrz1gdk{clip-path:polygon(0 0,100% 0,80% 100%,0 100%)}
7
9
  ._syaz16jw{color:var(--ds-text-accent-blue,#1558bc)}
8
10
  ._syaz17qg{color:var(--ds-text-accent-teal,#206a83)}
9
11
  ._syaz1s8m{color:var(--ds-text-accent-magenta,#943d73)}
@@ -5,6 +5,7 @@ import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
7
7
  import { cx } from '@atlaskit/css';
8
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
8
9
  import { Box } from '@atlaskit/primitives/compiled/box';
9
10
  import { Text } from '@atlaskit/primitives/compiled/text';
10
11
  var SKILL_TITLE_PREFIX = 'skill::';
@@ -33,8 +34,13 @@ export var parseSkillTagTitle = function parseSkillTagTitle(title) {
33
34
  };
34
35
  };
35
36
  var styles = {
36
- tag: "_2rkolb4i _1e0c1nu9 _16d9qvcn _vchhusvi _18u01b66 _19bv1b66 _u5f31b66 _bfhki8nm",
37
- slash: "_1e0c1nu9 _2hwx1b66"
37
+ tag: "_1e0c1nu9",
38
+ highlight: "_1e0c1nu9 _16d9qvcn _bfhki8nm",
39
+ highlightStart: "_1e0c1nu9 _19bv1b66 _mkrz1f6o",
40
+ highlightEnd: "_1e0c1nu9 _u5f31b66 _mkrz1gdk",
41
+ slash: "_1e0c1nu9 _u5f31b66",
42
+ legacyTag: "_2rkolb4i _1e0c1nu9 _16d9qvcn _vchhusvi _18u01b66 _19bv1b66 _u5f31b66 _bfhki8nm",
43
+ legacySlash: "_1e0c1nu9 _2hwx1b66"
38
44
  };
39
45
 
40
46
  // Slash accent colors for a Rovo skill, mirroring the enum used by the inserted skill chip
@@ -67,13 +73,34 @@ export var SkillTagLabel = function SkillTagLabel(_ref) {
67
73
  var color = _ref.color,
68
74
  slug = _ref.slug;
69
75
  var accentColor = isAccentColor(color) ? color : 'DEFAULT';
76
+ if (fg('rovo_skill_tag_slanted_background_killswitch')) {
77
+ return /*#__PURE__*/React.createElement(Box, {
78
+ as: "span",
79
+ xcss: styles.legacyTag,
80
+ testId: "skill-tag-label-container"
81
+ }, /*#__PURE__*/React.createElement(Box, {
82
+ as: "span",
83
+ xcss: cx(styles.legacySlash, accentColorStyles[accentColor])
84
+ }, "/"), /*#__PURE__*/React.createElement(Text, {
85
+ as: "span"
86
+ }, slug));
87
+ }
88
+ var slugBeforeLastCharacter = slug.slice(0, -1);
89
+ var lastSlugCharacter = slug.slice(-1);
70
90
  return /*#__PURE__*/React.createElement(Box, {
71
91
  as: "span",
72
- xcss: styles.tag
92
+ xcss: styles.tag,
93
+ testId: "skill-tag-label-container"
94
+ }, /*#__PURE__*/React.createElement(Text, {
95
+ as: "span"
73
96
  }, /*#__PURE__*/React.createElement(Box, {
74
97
  as: "span",
75
- xcss: cx(styles.slash, accentColorStyles[accentColor])
76
- }, "/"), /*#__PURE__*/React.createElement(Text, {
77
- as: "span"
78
- }, slug));
98
+ xcss: cx(styles.highlight, styles.highlightStart, styles.slash, accentColorStyles[accentColor])
99
+ }, "/"), slugBeforeLastCharacter && /*#__PURE__*/React.createElement(Box, {
100
+ as: "span",
101
+ xcss: styles.highlight
102
+ }, slugBeforeLastCharacter), lastSlugCharacter && /*#__PURE__*/React.createElement(Box, {
103
+ as: "span",
104
+ xcss: cx(styles.highlight, styles.highlightEnd)
105
+ }, lastSlugCharacter)));
79
106
  };
@@ -1,3 +1,4 @@
1
+ ._19itglyw{border:none}
1
2
  ._2rko1mok{border-radius:var(--ds-radius-large,8px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
2
3
  ._18m915vq{overflow-y:hidden}
3
4
  ._1bsbnklw{width:20pc}
@@ -5,4 +6,5 @@
5
6
  ._1reo15vq{overflow-x:hidden}
6
7
  ._85i512x7{padding-block-end:var(--ds-space-075,6px)}
7
8
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
9
+ ._r06hglyw{-webkit-appearance:none;appearance:none}
8
10
  ._vchhusvi{box-sizing:border-box}
@@ -13,14 +13,13 @@ import { Popup } from '@atlaskit/editor-common/ui';
13
13
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles/constants';
14
14
  import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
15
15
  import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
16
- import { Box } from '@atlaskit/primitives/compiled';
17
16
  import { InputQuery } from '../InputQuery';
18
17
  import { getTypeAheadGlobalViewMoreId } from './getTypeAheadGlobalViewMoreId';
19
18
  import { getTypeAheadItemId } from './getTypeAheadItemId';
20
19
  import { TypeAheadMenuRenderer } from './TypeAheadMenuRenderer';
21
20
  import { TypeAheadProvider } from './TypeAheadProvider';
22
21
  var styles = {
23
- menu: "_2rko1mok _1reo15vq _18m915vq _bfhk1bhr _vchhusvi _16qs130s _1q51u2gc _85i512x7 _1bsbnklw"
22
+ menu: "_19itglyw _2rko1mok _1reo15vq _18m915vq _bfhk1bhr _r06hglyw _vchhusvi _16qs130s _1q51u2gc _85i512x7 _1bsbnklw"
24
23
  };
25
24
  var DEFAULT_MENU_MAX_HEIGHT = 480;
26
25
  var MENU_VERTICAL_PADDING = 14;
@@ -179,11 +178,12 @@ export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
179
178
  scrollableElement: popupsScrollableElement,
180
179
  target: anchorElement,
181
180
  zIndex: akEditorFloatingDialogZIndex
182
- }, /*#__PURE__*/React.createElement(Box, {
181
+ }, /*#__PURE__*/React.createElement("div", {
183
182
  ref: menuRef,
183
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Parent overlays use this class to restore pointer interaction.
184
+ className: ax([styles.menu, "fabric-editor-typeahead"]),
184
185
  "data-registered-type-ahead-menu": "",
185
- testId: "registered-type-ahead-menu",
186
- xcss: styles.menu
186
+ "data-testid": "registered-type-ahead-menu"
187
187
  }, /*#__PURE__*/React.createElement(TypeAheadProvider, {
188
188
  value: typeAheadContextValue
189
189
  }, /*#__PURE__*/React.createElement(SurfaceProvider, null, /*#__PURE__*/React.createElement(TypeAheadMenuRenderer, {
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
1
5
  import React from 'react';
2
6
  import type { ExtractInjectionAPI, TypeAheadHandler } from '@atlaskit/editor-common/types';
3
7
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-type-ahead",
3
- "version": "23.0.9",
3
+ "version": "24.0.1",
4
4
  "description": "Type-ahead plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -23,11 +23,11 @@
23
23
  "dependencies": {
24
24
  "@atlaskit/adf-schema": "^57.6.0",
25
25
  "@atlaskit/css": "^1.1.0",
26
- "@atlaskit/editor-plugin-analytics": "^22.0.0",
27
- "@atlaskit/editor-plugin-connectivity": "^22.0.0",
28
- "@atlaskit/editor-plugin-context-panel": "^24.0.0",
29
- "@atlaskit/editor-plugin-metrics": "^23.0.0",
30
- "@atlaskit/editor-plugin-ui-control-registry": "^16.0.0",
26
+ "@atlaskit/editor-plugin-analytics": "^23.0.0",
27
+ "@atlaskit/editor-plugin-connectivity": "^23.0.0",
28
+ "@atlaskit/editor-plugin-context-panel": "^25.0.0",
29
+ "@atlaskit/editor-plugin-metrics": "^24.0.0",
30
+ "@atlaskit/editor-plugin-ui-control-registry": "^17.0.0",
31
31
  "@atlaskit/editor-prosemirror": "^9.0.0",
32
32
  "@atlaskit/editor-shared-styles": "^4.3.0",
33
33
  "@atlaskit/editor-ui-control-model": "^2.10.0",
@@ -42,7 +42,7 @@
42
42
  "@atlaskit/primitives": "^22.5.0",
43
43
  "@atlaskit/prosemirror-history": "^1.3.0",
44
44
  "@atlaskit/prosemirror-input-rules": "^4.1.0",
45
- "@atlaskit/tmp-editor-statsig": "^218.0.0",
45
+ "@atlaskit/tmp-editor-statsig": "^219.0.0",
46
46
  "@atlaskit/tokens": "^20.1.0",
47
47
  "@atlaskit/visually-hidden": "^4.4.0",
48
48
  "@babel/runtime": "^7.0.0",
@@ -54,7 +54,7 @@
54
54
  "w3c-keyname": "^2.1.8"
55
55
  },
56
56
  "peerDependencies": {
57
- "@atlaskit/editor-common": "^126.4.0",
57
+ "@atlaskit/editor-common": "^127.1.0",
58
58
  "react": "^18.2.0 || ^19.2.0",
59
59
  "react-dom": "^18.2.0 || ^19.2.0",
60
60
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -81,6 +81,10 @@
81
81
  },
82
82
  "platform_editor_mention_typeahead_profilecard": {
83
83
  "type": "boolean"
84
+ },
85
+ "rovo_skill_tag_slanted_background_killswitch": {
86
+ "type": "boolean",
87
+ "referenceOnly": true
84
88
  }
85
89
  }
86
90
  }