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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 24.0.0
+
+### Patch Changes
+
+- [`2fbfb8385de67`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2fbfb8385de67) -
+  Updates the Rovo skill tag label in the quick-insert typeahead menu to use slanted
+  leading/trailing background edges, matching the inserted skill chip, with a fallback to the legacy
+  rectangular background behind the `rovo_skill_tag_slanted_background_killswitch` gate.
+- [`c906e2e4ceb34`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c906e2e4ceb34) -
+  Clean up experiment `platform_editor_wide_slash_trigger`
+- Updated dependencies
+
 ## 23.0.9
 
 ### Patch Changes

package/dist/cjs/pm-plugins/commands/open-typeahead-at-cursor.js

@@ -7,7 +7,6 @@ exports.openTypeAheadAtCursor = exports.openTypeAhead = void 0;
 var _selection = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _actions = require("../actions");
 var _key = require("../key");
 var openTypeAhead = exports.openTypeAhead = function openTypeAhead(props) {
@@ -86,7 +85,7 @@ var openTypeAheadAtCursor = exports.openTypeAheadAtCursor = function openTypeAhe
       // been eroneously added because we require whitespace/newline for typeahead.
       // Check if the text ends with the trigger character (or any character matched
       // by customRegex, to support wide-char variants like fullwidth slash ／)
-      var triggerPattern = (0, _expValEquals.expValEquals)('platform_editor_wide_slash_trigger', 'isEnabled', true) && triggerHandler.customRegex ? new RegExp("(".concat(triggerHandler.customRegex, ")$"), 'u') : null;
+      var triggerPattern = triggerHandler.customRegex ? new RegExp("(".concat(triggerHandler.customRegex, ")$"), 'u') : null;
       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);
       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) {
         tr.delete(cursorPos - 1, cursorPos);

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

@@ -10,7 +10,6 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _actions = require("./actions");
 var _openTypeaheadAtCursor = require("./commands/open-typeahead-at-cursor");
 var _constants = require("./constants");
@@ -139,31 +138,29 @@ function createPlugin(_ref) {
       },
       handleDOMEvents: {
         compositionupdate: function compositionupdate(view, event) {
-          // When the experiment is on, track whether the current composition
-          // exactly matches a wide-char trigger (e.g. ／ from Japanese keyboard).
+          var _event$data, _typeAheadHandlers$fi;
+          // Track whether the current composition exactly matches a wide-char
+          // trigger (e.g. ／ from Japanese keyboard).
           // We can't open the typeahead yet because composition is still active,
           // but we record the matching handler so the next keydown (Enter) can use it.
-          if ((0, _expValEquals.expValEquals)('platform_editor_wide_slash_trigger', 'isEnabled', true)) {
-            var _event$data, _typeAheadHandlers$fi;
-            var pendingData = (_event$data = event.data) !== null && _event$data !== void 0 ? _event$data : '';
-            pendingWideSlashHandler = (_typeAheadHandlers$fi = typeAheadHandlers.find(function (handler) {
-              if (!handler.customRegex) {
-                return false;
-              }
-              // Only match if the composition is a NON-ASCII trigger character.
-              // ASCII triggers (e.g. '/') are handled by the normal input rule
-              // path and must NOT be intercepted here — otherwise typing '/' on
-              // a macOS Japanese IME (which briefly fires compositionupdate with
-              // data='/') would cause the Enter-confirm to open the typeahead.
-              // Matches any single ASCII character (U+0000–U+007F).
-              // No 'u' flag needed for ASCII-only ranges.
-              if (ASCII_CHAR_REGEX.test(pendingData)) {
-                return false;
-              }
-              var pattern = new RegExp("^(".concat(handler.customRegex, ")$"), 'u');
-              return pattern.test(pendingData);
-            })) !== null && _typeAheadHandlers$fi !== void 0 ? _typeAheadHandlers$fi : null;
-          }
+          var pendingData = (_event$data = event.data) !== null && _event$data !== void 0 ? _event$data : '';
+          pendingWideSlashHandler = (_typeAheadHandlers$fi = typeAheadHandlers.find(function (handler) {
+            if (!handler.customRegex) {
+              return false;
+            }
+            // Only match if the composition is a NON-ASCII trigger character.
+            // ASCII triggers (e.g. '/') are handled by the normal input rule
+            // path and must NOT be intercepted here — otherwise typing '/' on
+            // a macOS Japanese IME (which briefly fires compositionupdate with
+            // data='/') would cause the Enter-confirm to open the typeahead.
+            // Matches any single ASCII character (U+0000–U+007F).
+            // No 'u' flag needed for ASCII-only ranges.
+            if (ASCII_CHAR_REGEX.test(pendingData)) {
+              return false;
+            }
+            var pattern = new RegExp("^(".concat(handler.customRegex, ")$"), 'u');
+            return pattern.test(pendingData);
+          })) !== null && _typeAheadHandlers$fi !== void 0 ? _typeAheadHandlers$fi : null;
           return false;
         },
         compositionend: function compositionend(view, event) {

package/dist/cjs/ui/SkillTagLabel.compiled.css

@@ -4,6 +4,8 @@
 ._1e0c1nu9{display:inline}
 ._2hwx1b66{margin-right:var(--ds-space-050,4px)}
 ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._mkrz1f6o{clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}
+._mkrz1gdk{clip-path:polygon(0 0,100% 0,80% 100%,0 100%)}
 ._syaz16jw{color:var(--ds-text-accent-blue,#1558bc)}
 ._syaz17qg{color:var(--ds-text-accent-teal,#206a83)}
 ._syaz1s8m{color:var(--ds-text-accent-magenta,#943d73)}

package/dist/cjs/ui/SkillTagLabel.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
 var _css = require("@atlaskit/css");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _box = require("@atlaskit/primitives/compiled/box");
 var _text = require("@atlaskit/primitives/compiled/text");
 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
   };
 };
 var styles = {
-  tag: "_2rkolb4i _1e0c1nu9 _16d9qvcn _vchhusvi _18u01b66 _19bv1b66 _u5f31b66 _bfhki8nm",
-  slash: "_1e0c1nu9 _2hwx1b66"
+  tag: "_1e0c1nu9",
+  highlight: "_1e0c1nu9 _16d9qvcn _bfhki8nm",
+  highlightStart: "_1e0c1nu9 _19bv1b66 _mkrz1f6o",
+  highlightEnd: "_1e0c1nu9 _u5f31b66 _mkrz1gdk",
+  slash: "_1e0c1nu9 _u5f31b66",
+  legacyTag: "_2rkolb4i _1e0c1nu9 _16d9qvcn _vchhusvi _18u01b66 _19bv1b66 _u5f31b66 _bfhki8nm",
+  legacySlash: "_1e0c1nu9 _2hwx1b66"
 };
 
 // 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) {
   var color = _ref.color,
     slug = _ref.slug;
   var accentColor = isAccentColor(color) ? color : 'DEFAULT';
+  if ((0, _fg.fg)('rovo_skill_tag_slanted_background_killswitch')) {
+    return /*#__PURE__*/React.createElement(_box.Box, {
+      as: "span",
+      xcss: styles.legacyTag,
+      testId: "skill-tag-label-container"
+    }, /*#__PURE__*/React.createElement(_box.Box, {
+      as: "span",
+      xcss: (0, _css.cx)(styles.legacySlash, accentColorStyles[accentColor])
+    }, "/"), /*#__PURE__*/React.createElement(_text.Text, {
+      as: "span"
+    }, slug));
+  }
+  var slugBeforeLastCharacter = slug.slice(0, -1);
+  var lastSlugCharacter = slug.slice(-1);
   return /*#__PURE__*/React.createElement(_box.Box, {
     as: "span",
-    xcss: styles.tag
+    xcss: styles.tag,
+    testId: "skill-tag-label-container"
+  }, /*#__PURE__*/React.createElement(_text.Text, {
+    as: "span"
   }, /*#__PURE__*/React.createElement(_box.Box, {
     as: "span",
-    xcss: (0, _css.cx)(styles.slash, accentColorStyles[accentColor])
-  }, "/"), /*#__PURE__*/React.createElement(_text.Text, {
-    as: "span"
-  }, slug));
+    xcss: (0, _css.cx)(styles.highlight, styles.highlightStart, styles.slash, accentColorStyles[accentColor])
+  }, "/"), slugBeforeLastCharacter && /*#__PURE__*/React.createElement(_box.Box, {
+    as: "span",
+    xcss: styles.highlight
+  }, slugBeforeLastCharacter), lastSlugCharacter && /*#__PURE__*/React.createElement(_box.Box, {
+    as: "span",
+    xcss: (0, _css.cx)(styles.highlight, styles.highlightEnd)
+  }, lastSlugCharacter)));
 };

package/dist/es2019/pm-plugins/commands/open-typeahead-at-cursor.js

@@ -1,7 +1,6 @@
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTIONS } from '../actions';
 import { pluginKey } from '../key';
 export const openTypeAhead = props => tr => {
@@ -83,7 +82,7 @@ export const openTypeAheadAtCursor = ({
     // been eroneously added because we require whitespace/newline for typeahead.
     // Check if the text ends with the trigger character (or any character matched
     // by customRegex, to support wide-char variants like fullwidth slash ／)
-    const triggerPattern = expValEquals('platform_editor_wide_slash_trigger', 'isEnabled', true) && triggerHandler.customRegex ? new RegExp(`(${triggerHandler.customRegex})$`, 'u') : null;
+    const triggerPattern = triggerHandler.customRegex ? new RegExp(`(${triggerHandler.customRegex})$`, 'u') : null;
     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);
     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) {
       tr.delete(cursorPos - 1, cursorPos);

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

@@ -4,7 +4,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { closest } from '@atlaskit/editor-common/utils';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTIONS } from './actions';
 import { openTypeAheadAtCursor } from './commands/open-typeahead-at-cursor';
 import { TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE } from './constants';
@@ -134,31 +133,29 @@ export function createPlugin({
       },
       handleDOMEvents: {
         compositionupdate: (view, event) => {
-          // When the experiment is on, track whether the current composition
-          // exactly matches a wide-char trigger (e.g. ／ from Japanese keyboard).
+          var _event$data, _typeAheadHandlers$fi;
+          // Track whether the current composition exactly matches a wide-char
+          // trigger (e.g. ／ from Japanese keyboard).
           // We can't open the typeahead yet because composition is still active,
           // but we record the matching handler so the next keydown (Enter) can use it.
-          if (expValEquals('platform_editor_wide_slash_trigger', 'isEnabled', true)) {
-            var _event$data, _typeAheadHandlers$fi;
-            const pendingData = (_event$data = event.data) !== null && _event$data !== void 0 ? _event$data : '';
-            pendingWideSlashHandler = (_typeAheadHandlers$fi = typeAheadHandlers.find(handler => {
-              if (!handler.customRegex) {
-                return false;
-              }
-              // Only match if the composition is a NON-ASCII trigger character.
-              // ASCII triggers (e.g. '/') are handled by the normal input rule
-              // path and must NOT be intercepted here — otherwise typing '/' on
-              // a macOS Japanese IME (which briefly fires compositionupdate with
-              // data='/') would cause the Enter-confirm to open the typeahead.
-              // Matches any single ASCII character (U+0000–U+007F).
-              // No 'u' flag needed for ASCII-only ranges.
-              if (ASCII_CHAR_REGEX.test(pendingData)) {
-                return false;
-              }
-              const pattern = new RegExp(`^(${handler.customRegex})$`, 'u');
-              return pattern.test(pendingData);
-            })) !== null && _typeAheadHandlers$fi !== void 0 ? _typeAheadHandlers$fi : null;
-          }
+          const pendingData = (_event$data = event.data) !== null && _event$data !== void 0 ? _event$data : '';
+          pendingWideSlashHandler = (_typeAheadHandlers$fi = typeAheadHandlers.find(handler => {
+            if (!handler.customRegex) {
+              return false;
+            }
+            // Only match if the composition is a NON-ASCII trigger character.
+            // ASCII triggers (e.g. '/') are handled by the normal input rule
+            // path and must NOT be intercepted here — otherwise typing '/' on
+            // a macOS Japanese IME (which briefly fires compositionupdate with
+            // data='/') would cause the Enter-confirm to open the typeahead.
+            // Matches any single ASCII character (U+0000–U+007F).
+            // No 'u' flag needed for ASCII-only ranges.
+            if (ASCII_CHAR_REGEX.test(pendingData)) {
+              return false;
+            }
+            const pattern = new RegExp(`^(${handler.customRegex})$`, 'u');
+            return pattern.test(pendingData);
+          })) !== null && _typeAheadHandlers$fi !== void 0 ? _typeAheadHandlers$fi : null;
           return false;
         },
         compositionend: (view, event) => {

package/dist/es2019/ui/SkillTagLabel.compiled.css

@@ -4,6 +4,8 @@
 ._1e0c1nu9{display:inline}
 ._2hwx1b66{margin-right:var(--ds-space-050,4px)}
 ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._mkrz1f6o{clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}
+._mkrz1gdk{clip-path:polygon(0 0,100% 0,80% 100%,0 100%)}
 ._syaz16jw{color:var(--ds-text-accent-blue,#1558bc)}
 ._syaz17qg{color:var(--ds-text-accent-teal,#206a83)}
 ._syaz1s8m{color:var(--ds-text-accent-magenta,#943d73)}

package/dist/es2019/ui/SkillTagLabel.js

@@ -3,6 +3,7 @@ import "./SkillTagLabel.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Box } from '@atlaskit/primitives/compiled/box';
 import { Text } from '@atlaskit/primitives/compiled/text';
 const SKILL_TITLE_PREFIX = 'skill::';
@@ -27,8 +28,13 @@ export const parseSkillTagTitle = title => {
   };
 };
 const styles = {
-  tag: "_2rkolb4i _1e0c1nu9 _16d9qvcn _vchhusvi _18u01b66 _19bv1b66 _u5f31b66 _bfhki8nm",
-  slash: "_1e0c1nu9 _2hwx1b66"
+  tag: "_1e0c1nu9",
+  highlight: "_1e0c1nu9 _16d9qvcn _bfhki8nm",
+  highlightStart: "_1e0c1nu9 _19bv1b66 _mkrz1f6o",
+  highlightEnd: "_1e0c1nu9 _u5f31b66 _mkrz1gdk",
+  slash: "_1e0c1nu9 _u5f31b66",
+  legacyTag: "_2rkolb4i _1e0c1nu9 _16d9qvcn _vchhusvi _18u01b66 _19bv1b66 _u5f31b66 _bfhki8nm",
+  legacySlash: "_1e0c1nu9 _2hwx1b66"
 };
 
 // Slash accent colors for a Rovo skill, mirroring the enum used by the inserted skill chip
@@ -60,13 +66,34 @@ export const SkillTagLabel = ({
   slug
 }) => {
   const accentColor = isAccentColor(color) ? color : 'DEFAULT';
+  if (fg('rovo_skill_tag_slanted_background_killswitch')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.legacyTag,
+      testId: "skill-tag-label-container"
+    }, /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: cx(styles.legacySlash, accentColorStyles[accentColor])
+    }, "/"), /*#__PURE__*/React.createElement(Text, {
+      as: "span"
+    }, slug));
+  }
+  const slugBeforeLastCharacter = slug.slice(0, -1);
+  const lastSlugCharacter = slug.slice(-1);
   return /*#__PURE__*/React.createElement(Box, {
     as: "span",
-    xcss: styles.tag
+    xcss: styles.tag,
+    testId: "skill-tag-label-container"
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span"
   }, /*#__PURE__*/React.createElement(Box, {
     as: "span",
-    xcss: cx(styles.slash, accentColorStyles[accentColor])
-  }, "/"), /*#__PURE__*/React.createElement(Text, {
-    as: "span"
-  }, slug));
+    xcss: cx(styles.highlight, styles.highlightStart, styles.slash, accentColorStyles[accentColor])
+  }, "/"), slugBeforeLastCharacter && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.highlight
+  }, slugBeforeLastCharacter), lastSlugCharacter && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: cx(styles.highlight, styles.highlightEnd)
+  }, lastSlugCharacter)));
 };

package/dist/esm/pm-plugins/commands/open-typeahead-at-cursor.js

@@ -1,7 +1,6 @@
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTIONS } from '../actions';
 import { pluginKey } from '../key';
 export var openTypeAhead = function openTypeAhead(props) {
@@ -80,7 +79,7 @@ export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
       // been eroneously added because we require whitespace/newline for typeahead.
       // Check if the text ends with the trigger character (or any character matched
       // by customRegex, to support wide-char variants like fullwidth slash ／)
-      var triggerPattern = expValEquals('platform_editor_wide_slash_trigger', 'isEnabled', true) && triggerHandler.customRegex ? new RegExp("(".concat(triggerHandler.customRegex, ")$"), 'u') : null;
+      var triggerPattern = triggerHandler.customRegex ? new RegExp("(".concat(triggerHandler.customRegex, ")$"), 'u') : null;
       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);
       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) {
         tr.delete(cursorPos - 1, cursorPos);

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

@@ -4,7 +4,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { closest } from '@atlaskit/editor-common/utils';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTIONS } from './actions';
 import { openTypeAheadAtCursor } from './commands/open-typeahead-at-cursor';
 import { TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE } from './constants';
@@ -134,31 +133,29 @@ export function createPlugin(_ref) {
       },
       handleDOMEvents: {
         compositionupdate: function compositionupdate(view, event) {
-          // When the experiment is on, track whether the current composition
-          // exactly matches a wide-char trigger (e.g. ／ from Japanese keyboard).
+          var _event$data, _typeAheadHandlers$fi;
+          // Track whether the current composition exactly matches a wide-char
+          // trigger (e.g. ／ from Japanese keyboard).
           // We can't open the typeahead yet because composition is still active,
           // but we record the matching handler so the next keydown (Enter) can use it.
-          if (expValEquals('platform_editor_wide_slash_trigger', 'isEnabled', true)) {
-            var _event$data, _typeAheadHandlers$fi;
-            var pendingData = (_event$data = event.data) !== null && _event$data !== void 0 ? _event$data : '';
-            pendingWideSlashHandler = (_typeAheadHandlers$fi = typeAheadHandlers.find(function (handler) {
-              if (!handler.customRegex) {
-                return false;
-              }
-              // Only match if the composition is a NON-ASCII trigger character.
-              // ASCII triggers (e.g. '/') are handled by the normal input rule
-              // path and must NOT be intercepted here — otherwise typing '/' on
-              // a macOS Japanese IME (which briefly fires compositionupdate with
-              // data='/') would cause the Enter-confirm to open the typeahead.
-              // Matches any single ASCII character (U+0000–U+007F).
-              // No 'u' flag needed for ASCII-only ranges.
-              if (ASCII_CHAR_REGEX.test(pendingData)) {
-                return false;
-              }
-              var pattern = new RegExp("^(".concat(handler.customRegex, ")$"), 'u');
-              return pattern.test(pendingData);
-            })) !== null && _typeAheadHandlers$fi !== void 0 ? _typeAheadHandlers$fi : null;
-          }
+          var pendingData = (_event$data = event.data) !== null && _event$data !== void 0 ? _event$data : '';
+          pendingWideSlashHandler = (_typeAheadHandlers$fi = typeAheadHandlers.find(function (handler) {
+            if (!handler.customRegex) {
+              return false;
+            }
+            // Only match if the composition is a NON-ASCII trigger character.
+            // ASCII triggers (e.g. '/') are handled by the normal input rule
+            // path and must NOT be intercepted here — otherwise typing '/' on
+            // a macOS Japanese IME (which briefly fires compositionupdate with
+            // data='/') would cause the Enter-confirm to open the typeahead.
+            // Matches any single ASCII character (U+0000–U+007F).
+            // No 'u' flag needed for ASCII-only ranges.
+            if (ASCII_CHAR_REGEX.test(pendingData)) {
+              return false;
+            }
+            var pattern = new RegExp("^(".concat(handler.customRegex, ")$"), 'u');
+            return pattern.test(pendingData);
+          })) !== null && _typeAheadHandlers$fi !== void 0 ? _typeAheadHandlers$fi : null;
           return false;
         },
         compositionend: function compositionend(view, event) {

package/dist/esm/ui/SkillTagLabel.compiled.css

@@ -4,6 +4,8 @@
 ._1e0c1nu9{display:inline}
 ._2hwx1b66{margin-right:var(--ds-space-050,4px)}
 ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._mkrz1f6o{clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}
+._mkrz1gdk{clip-path:polygon(0 0,100% 0,80% 100%,0 100%)}
 ._syaz16jw{color:var(--ds-text-accent-blue,#1558bc)}
 ._syaz17qg{color:var(--ds-text-accent-teal,#206a83)}
 ._syaz1s8m{color:var(--ds-text-accent-magenta,#943d73)}

package/dist/esm/ui/SkillTagLabel.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 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; }
 import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Box } from '@atlaskit/primitives/compiled/box';
 import { Text } from '@atlaskit/primitives/compiled/text';
 var SKILL_TITLE_PREFIX = 'skill::';
@@ -33,8 +34,13 @@ export var parseSkillTagTitle = function parseSkillTagTitle(title) {
   };
 };
 var styles = {
-  tag: "_2rkolb4i _1e0c1nu9 _16d9qvcn _vchhusvi _18u01b66 _19bv1b66 _u5f31b66 _bfhki8nm",
-  slash: "_1e0c1nu9 _2hwx1b66"
+  tag: "_1e0c1nu9",
+  highlight: "_1e0c1nu9 _16d9qvcn _bfhki8nm",
+  highlightStart: "_1e0c1nu9 _19bv1b66 _mkrz1f6o",
+  highlightEnd: "_1e0c1nu9 _u5f31b66 _mkrz1gdk",
+  slash: "_1e0c1nu9 _u5f31b66",
+  legacyTag: "_2rkolb4i _1e0c1nu9 _16d9qvcn _vchhusvi _18u01b66 _19bv1b66 _u5f31b66 _bfhki8nm",
+  legacySlash: "_1e0c1nu9 _2hwx1b66"
 };
 
 // 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) {
   var color = _ref.color,
     slug = _ref.slug;
   var accentColor = isAccentColor(color) ? color : 'DEFAULT';
+  if (fg('rovo_skill_tag_slanted_background_killswitch')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.legacyTag,
+      testId: "skill-tag-label-container"
+    }, /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: cx(styles.legacySlash, accentColorStyles[accentColor])
+    }, "/"), /*#__PURE__*/React.createElement(Text, {
+      as: "span"
+    }, slug));
+  }
+  var slugBeforeLastCharacter = slug.slice(0, -1);
+  var lastSlugCharacter = slug.slice(-1);
   return /*#__PURE__*/React.createElement(Box, {
     as: "span",
-    xcss: styles.tag
+    xcss: styles.tag,
+    testId: "skill-tag-label-container"
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span"
   }, /*#__PURE__*/React.createElement(Box, {
     as: "span",
-    xcss: cx(styles.slash, accentColorStyles[accentColor])
-  }, "/"), /*#__PURE__*/React.createElement(Text, {
-    as: "span"
-  }, slug));
+    xcss: cx(styles.highlight, styles.highlightStart, styles.slash, accentColorStyles[accentColor])
+  }, "/"), slugBeforeLastCharacter && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.highlight
+  }, slugBeforeLastCharacter), lastSlugCharacter && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: cx(styles.highlight, styles.highlightEnd)
+  }, lastSlugCharacter)));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "23.0.9",
+	"version": "24.0.0",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -23,11 +23,11 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^57.6.0",
 		"@atlaskit/css": "^1.1.0",
-		"@atlaskit/editor-plugin-analytics": "^22.0.0",
-		"@atlaskit/editor-plugin-connectivity": "^22.0.0",
-		"@atlaskit/editor-plugin-context-panel": "^24.0.0",
-		"@atlaskit/editor-plugin-metrics": "^23.0.0",
-		"@atlaskit/editor-plugin-ui-control-registry": "^16.0.0",
+		"@atlaskit/editor-plugin-analytics": "^23.0.0",
+		"@atlaskit/editor-plugin-connectivity": "^23.0.0",
+		"@atlaskit/editor-plugin-context-panel": "^25.0.0",
+		"@atlaskit/editor-plugin-metrics": "^24.0.0",
+		"@atlaskit/editor-plugin-ui-control-registry": "^17.0.0",
 		"@atlaskit/editor-prosemirror": "^9.0.0",
 		"@atlaskit/editor-shared-styles": "^4.3.0",
 		"@atlaskit/editor-ui-control-model": "^2.10.0",
@@ -42,7 +42,7 @@
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/prosemirror-history": "^1.3.0",
 		"@atlaskit/prosemirror-input-rules": "^4.1.0",
-		"@atlaskit/tmp-editor-statsig": "^218.0.0",
+		"@atlaskit/tmp-editor-statsig": "^219.0.0",
 		"@atlaskit/tokens": "^20.1.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -54,7 +54,7 @@
 		"w3c-keyname": "^2.1.8"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^126.4.0",
+		"@atlaskit/editor-common": "^127.0.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"
@@ -81,6 +81,10 @@
 		},
 		"platform_editor_mention_typeahead_profilecard": {
 			"type": "boolean"
+		},
+		"rovo_skill_tag_slanted_background_killswitch": {
+			"type": "boolean",
+			"referenceOnly": true
 		}
 	}
 }