@atlaskit/editor-plugin-type-ahead 2.2.4 → 2.3.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 2.3.1
+
+### Patch Changes
+
+- [#135114](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135114)
+  [`10c7a0e5424f9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/10c7a0e5424f9) -
+  Remove the typeahead trigger when a users actions closes the panel, under
+  `platform_editor_controls` experiment and `platform_editor_controls_patch_1` feature gate
+
+## 2.3.0
+
+### Minor Changes
+
+- [#135301](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135301)
+  [`282513a152fa2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/282513a152fa2) -
+  [A11Y-9960] Extract the AssistiveText component from the typeahead plugin for reuse in other
+  editor plugins
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.2.4
 
 ### Patch Changes

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

@@ -12,13 +12,15 @@ var openTypeAhead = exports.openTypeAhead = function openTypeAhead(props) {
   return function (tr) {
     var triggerHandler = props.triggerHandler,
       inputMethod = props.inputMethod,
-      query = props.query;
+      query = props.query,
+      removePrefixTriggerOnCancel = props.removePrefixTriggerOnCancel;
     tr.setMeta(_key.pluginKey, {
       action: _actions.ACTIONS.OPEN_TYPEAHEAD_AT_CURSOR,
       params: {
         triggerHandler: triggerHandler,
         inputMethod: inputMethod,
-        query: query
+        query: query,
+        removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
       }
     });
   };
@@ -26,13 +28,15 @@ var openTypeAhead = exports.openTypeAhead = function openTypeAhead(props) {
 var openTypeAheadAtCursor = exports.openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
   var triggerHandler = _ref.triggerHandler,
     inputMethod = _ref.inputMethod,
-    query = _ref.query;
+    query = _ref.query,
+    removePrefixTriggerOnCancel = _ref.removePrefixTriggerOnCancel;
   return function (_ref2) {
     var tr = _ref2.tr;
     openTypeAhead({
       triggerHandler: triggerHandler,
       inputMethod: inputMethod,
-      query: query
+      query: query,
+      removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
     })(tr);
     var selection = tr.selection;
     var isInline = selection instanceof _state.NodeSelection && selection.node.type.isInline;

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

@@ -61,7 +61,8 @@ function createPlugin(_ref) {
           errorInfo: null,
           selectedIndex: -1,
           stats: null,
-          inputMethod: null
+          inputMethod: null,
+          removePrefixTriggerOnCancel: undefined
         };
       },
       apply: function apply(tr, currentPluginState, oldEditorState, state) {

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

@@ -51,7 +51,8 @@ var createReducer = exports.createReducer = function createReducer(_ref) {
       triggerHandler = _ref2.triggerHandler,
       inputMethod = _ref2.inputMethod,
       reopenQuery = _ref2.reopenQuery,
-      selectedIndex = _ref2.selectedIndex;
+      selectedIndex = _ref2.selectedIndex,
+      removePrefixTriggerOnCancel = _ref2.removePrefixTriggerOnCancel;
     removeDecorations(currentPluginState.decorationSet);
     var _createDecorations = createDecorations(tr, {
         triggerHandler: triggerHandler,
@@ -69,7 +70,8 @@ var createReducer = exports.createReducer = function createReducer(_ref) {
       inputMethod: inputMethod,
       selectedIndex: typeof selectedIndex === 'number' ? selectedIndex : -1,
       items: [],
-      query: reopenQuery || ''
+      query: reopenQuery || '',
+      removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
     });
   };
   var closeMenu = function closeMenu(currentPluginState) {
@@ -81,7 +83,8 @@ var createReducer = exports.createReducer = function createReducer(_ref) {
       decorationSet: _view.DecorationSet.empty,
       stats: null,
       triggerHandler: undefined,
-      items: []
+      items: [],
+      removePrefixTriggerOnCancel: undefined
     });
   };
   return function (tr, currentPluginState, typeAheadStepOverride) {
@@ -116,7 +119,8 @@ var createReducer = exports.createReducer = function createReducer(_ref) {
         tr: tr,
         triggerHandler: params.triggerHandler,
         inputMethod: params.inputMethod,
-        reopenQuery: params.query
+        reopenQuery: params.query,
+        removePrefixTriggerOnCancel: params.removePrefixTriggerOnCancel
       });
     } else if (shouldCloseMenu) {
       return closeMenu(currentPluginState);

package/dist/cjs/typeAheadPlugin.js

@@ -35,11 +35,13 @@ var createOpenAtTransaction = function createOpenAtTransaction(editorAnalyticsAP
     return function (tr) {
       var triggerHandler = props.triggerHandler,
         inputMethod = props.inputMethod,
-        query = props.query;
+        query = props.query,
+        removePrefixTriggerOnCancel = props.removePrefixTriggerOnCancel;
       (0, _openTypeaheadAtCursor.openTypeAheadAtCursor)({
         triggerHandler: triggerHandler,
         inputMethod: inputMethod,
-        query: query
+        query: query,
+        removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
       })({
         tr: tr
       });

package/dist/cjs/ui/InputQuery.js

@@ -13,11 +13,12 @@ var _reactIntlNext = require("react-intl-next");
 var _w3cKeyname = require("w3c-keyname");
 var _browser = require("@atlaskit/editor-common/browser");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _constants = require("../pm-plugins/constants");
 var _utils = require("../pm-plugins/utils");
-var _AssistiveText = require("./AssistiveText");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -109,6 +110,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     query = _useState2[0],
     setQuery = _useState2[1];
   var isEditorControlsEnabled = (0, _experiments.editorExperiment)('platform_editor_insertion', 'variant1');
+  var isEditorControlsPatch2Enabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2');
   var _useState3 = (0, _react.useState)(isEditorControlsEnabled && triggerQueryPrefix === '/'),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     showPlaceholder = _useState4[0],
@@ -139,7 +141,8 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     var text = cleanedInputContent();
     var stopDefault = false;
     var _ref2 = (0, _utils.getPluginState)(editorView.state) || {},
-      selectedIndex = _ref2.selectedIndex;
+      selectedIndex = _ref2.selectedIndex,
+      removePrefixTriggerOnCancel = _ref2.removePrefixTriggerOnCancel;
     setInFocus(true);
     switch (key) {
       case ' ':
@@ -148,7 +151,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
           cancel({
             forceFocusOnEditor: true,
             text: ' ',
-            addPrefixTrigger: true,
+            addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
             setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED
           });
           stopDefault = true;
@@ -161,7 +164,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
         cancel({
           text: text,
           forceFocusOnEditor: true,
-          addPrefixTrigger: true,
+          addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
           setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED
         });
         stopDefault = true;
@@ -233,7 +236,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
       event.preventDefault();
       return false;
     }
-  }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
+  }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state, isEditorControlsPatch2Enabled]);
   var onClick = (0, _react.useCallback)(function (event) {
     var _inputRef$current;
     event.stopPropagation();
@@ -247,6 +250,8 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
       return;
     }
     var element = ref.current;
+    var _ref3 = (0, _utils.getPluginState)(editorView.state) || {},
+      removePrefixTriggerOnCancel = _ref3.removePrefixTriggerOnCancel;
     var onFocusIn = function onFocusIn(event) {
       onQueryFocus();
     };
@@ -263,7 +268,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
         }
         cancel({
           forceFocusOnEditor: true,
-          addPrefixTrigger: true,
+          addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
           text: cleanedInputContent(),
           setSelectionAt: isMovingRight ? _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED : _constants.CloseSelectionOptions.BEFORE_TEXT_INSERTED
         });
@@ -293,7 +298,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
         return;
       }
       cancel({
-        addPrefixTrigger: true,
+        addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
         text: cleanedInputContent(),
         setSelectionAt: _constants.CloseSelectionOptions.BEFORE_TEXT_INSERTED,
         forceFocusOnEditor: false
@@ -393,7 +398,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
         element.removeEventListener('input', onInput);
       }
     };
-  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
+  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state, isEditorControlsPatch2Enabled]);
   (0, _react.useLayoutEffect)(function () {
     var hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
     if (ref.current && forceFocus) {
@@ -450,7 +455,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     style: {
       display: 'none'
     }
-  }, intl.formatMessage(_typeAhead.typeAheadListMessages.inputQueryAssistiveLabel)), (0, _react2.jsx)(_AssistiveText.AssistiveText, {
+  }, intl.formatMessage(_typeAhead.typeAheadListMessages.inputQueryAssistiveLabel)), (0, _react2.jsx)(_ui.AssistiveText, {
     assistiveText: items.length === 0 ? intl.formatMessage(_typeAhead.typeAheadListMessages.noSearchResultsLabel, {
       itemsLength: items.length
     }) : '',

package/dist/cjs/ui/TypeAheadList.js

@@ -14,13 +14,13 @@ var _CellMeasurer = require("react-virtualized/dist/commonjs/CellMeasurer");
 var _List = require("react-virtualized/dist/commonjs/List");
 var _messages = require("@atlaskit/editor-common/messages");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _ui = require("@atlaskit/editor-common/ui");
 var _menu = require("@atlaskit/menu");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _updateSelectedIndex = require("../pm-plugins/commands/update-selected-index");
 var _constants = require("../pm-plugins/constants");
 var _utils = require("../pm-plugins/utils");
-var _AssistiveText = require("./AssistiveText");
 var _ListRow = require("./ListRow");
 var _TypeAheadListItem = require("./TypeAheadListItem");
 var _ViewMore = require("./ViewMore");
@@ -44,7 +44,7 @@ var list = (0, _react2.css)({
 var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
   var numberOfResults = _ref.numberOfResults;
   var intl = (0, _reactIntlNext.useIntl)();
-  return (0, _react2.jsx)(_AssistiveText.AssistiveText, {
+  return (0, _react2.jsx)(_ui.AssistiveText, {
     assistiveText: intl.formatMessage(_typeAhead.typeAheadListMessages.searchResultsLabel, {
       itemsLength: numberOfResults
     })

package/dist/cjs/ui/TypeAheadPopup.js

@@ -17,8 +17,10 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _closeTypeAhead = require("../pm-plugins/commands/close-type-ahead");
 var _constants = require("../pm-plugins/constants");
+var _utils = require("../pm-plugins/utils");
 var _TypeAheadErrorFallback = require("./TypeAheadErrorFallback");
 var _TypeAheadList = require("./TypeAheadList");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -80,6 +82,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['featureFlags']),
     featureFlagsState = _useSharedPluginState.featureFlagsState;
   var moreElementsInQuickInsertViewEnabled = (featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.moreElementsInQuickInsertView) && triggerHandler.id === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT;
+  var isEditorControlsPatch2Enabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2');
   var defaultMenuHeight = (0, _react.useMemo)(function () {
     return moreElementsInQuickInsertViewEnabled ? DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW : DEFAULT_TYPEAHEAD_MENU_HEIGHT;
   }, [moreElementsInQuickInsertViewEnabled]);
@@ -204,6 +207,8 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     };
   }, [anchorElement, popupsScrollableElement, getFitHeightDebounced, getFitHeight]);
   (0, _react.useLayoutEffect)(function () {
+    var _ref2 = (0, _utils.getPluginState)(editorView.state) || {},
+      removePrefixTriggerOnCancel = _ref2.removePrefixTriggerOnCancel;
     var focusOut = function focusOut(event) {
       var _window$getSelection;
       var relatedTarget = event.relatedTarget;
@@ -253,7 +258,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
         }
       }
       cancel({
-        addPrefixTrigger: true,
+        addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
         setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED,
         forceFocusOnEditor: false
       });
@@ -267,15 +272,17 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       element === null || element === void 0 || element.removeEventListener('focusout', focusOut);
     };
-  }, [ref, cancel]);
+  }, [ref, cancel, editorView.state, isEditorControlsPatch2Enabled]);
 
   // TODO: ED-17443 - When you press escape on typeahead panel, it should remove focus and close the panel
   // This is the expected keyboard behaviour advised by the Accessibility team
   (0, _react.useLayoutEffect)(function () {
+    var _ref3 = (0, _utils.getPluginState)(editorView.state) || {},
+      removePrefixTriggerOnCancel = _ref3.removePrefixTriggerOnCancel;
     var escape = function escape(event) {
       if (event.key === 'Escape') {
         cancel({
-          addPrefixTrigger: true,
+          addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
           setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED,
           forceFocusOnEditor: true
         });
@@ -290,7 +297,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       element === null || element === void 0 || element.removeEventListener('keydown', escape);
     };
-  }, [ref, cancel]);
+  }, [ref, cancel, editorView.state, isEditorControlsPatch2Enabled]);
 
   // @ts-ignore
   var openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;

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

@@ -6,28 +6,32 @@ export const openTypeAhead = props => tr => {
   const {
     triggerHandler,
     inputMethod,
-    query
+    query,
+    removePrefixTriggerOnCancel
   } = props;
   tr.setMeta(pluginKey, {
     action: ACTIONS.OPEN_TYPEAHEAD_AT_CURSOR,
     params: {
       triggerHandler,
       inputMethod,
-      query
+      query,
+      removePrefixTriggerOnCancel
     }
   });
 };
 export const openTypeAheadAtCursor = ({
   triggerHandler,
   inputMethod,
-  query
+  query,
+  removePrefixTriggerOnCancel
 }) => ({
   tr
 }) => {
   openTypeAhead({
     triggerHandler,
     inputMethod,
-    query
+    query,
+    removePrefixTriggerOnCancel
   })(tr);
   const {
     selection

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

@@ -55,7 +55,8 @@ export function createPlugin({
           errorInfo: null,
           selectedIndex: -1,
           stats: null,
-          inputMethod: null
+          inputMethod: null,
+          removePrefixTriggerOnCancel: undefined
         };
       },
       apply(tr, currentPluginState, oldEditorState, state) {

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

@@ -38,7 +38,8 @@ export const createReducer = ({
     triggerHandler,
     inputMethod,
     reopenQuery,
-    selectedIndex
+    selectedIndex,
+    removePrefixTriggerOnCancel
   }) => {
     removeDecorations(currentPluginState.decorationSet);
     const {
@@ -59,7 +60,8 @@ export const createReducer = ({
       inputMethod,
       selectedIndex: typeof selectedIndex === 'number' ? selectedIndex : -1,
       items: [],
-      query: reopenQuery || ''
+      query: reopenQuery || '',
+      removePrefixTriggerOnCancel
     };
   };
   const closeMenu = currentPluginState => {
@@ -72,7 +74,8 @@ export const createReducer = ({
       decorationSet: DecorationSet.empty,
       stats: null,
       triggerHandler: undefined,
-      items: []
+      items: [],
+      removePrefixTriggerOnCancel: undefined
     };
   };
   return (tr, currentPluginState, typeAheadStepOverride) => {
@@ -108,7 +111,8 @@ export const createReducer = ({
         tr,
         triggerHandler: params.triggerHandler,
         inputMethod: params.inputMethod,
-        reopenQuery: params.query
+        reopenQuery: params.query,
+        removePrefixTriggerOnCancel: params.removePrefixTriggerOnCancel
       });
     } else if (shouldCloseMenu) {
       return closeMenu(currentPluginState);

package/dist/es2019/typeAheadPlugin.js

@@ -26,12 +26,14 @@ const createOpenAtTransaction = editorAnalyticsAPI => props => tr => {
   const {
     triggerHandler,
     inputMethod,
-    query
+    query,
+    removePrefixTriggerOnCancel
   } = props;
   openTypeAheadAtCursor({
     triggerHandler,
     inputMethod,
-    query
+    query,
+    removePrefixTriggerOnCancel
   })({
     tr
   });

package/dist/es2019/ui/InputQuery.js

@@ -10,11 +10,12 @@ import { useIntl } from 'react-intl-next';
 import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { browser } from '@atlaskit/editor-common/browser';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
+import { AssistiveText } from '@atlaskit/editor-common/ui';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_ELEMENT_ID, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
 import { getPluginState } from '../pm-plugins/utils';
-import { AssistiveText } from './AssistiveText';
 const placeholderStyles = css({
   '&::after': {
     content: 'attr(data-place-holder)',
@@ -95,6 +96,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
   const inputRef = useRef(null);
   const [query, setQuery] = useState(null);
   const isEditorControlsEnabled = editorExperiment('platform_editor_insertion', 'variant1');
+  const isEditorControlsPatch2Enabled = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2');
   const [showPlaceholder, setShowPlaceholder] = useState(isEditorControlsEnabled && triggerQueryPrefix === '/');
   const cleanedInputContent = useCallback(() => {
     var _ref$current;
@@ -119,7 +121,8 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     const text = cleanedInputContent();
     let stopDefault = false;
     const {
-      selectedIndex
+      selectedIndex,
+      removePrefixTriggerOnCancel
     } = getPluginState(editorView.state) || {};
     setInFocus(true);
     switch (key) {
@@ -129,7 +132,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
           cancel({
             forceFocusOnEditor: true,
             text: ' ',
-            addPrefixTrigger: true,
+            addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
             setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED
           });
           stopDefault = true;
@@ -142,7 +145,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         cancel({
           text,
           forceFocusOnEditor: true,
-          addPrefixTrigger: true,
+          addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
           setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED
         });
         stopDefault = true;
@@ -214,7 +217,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       event.preventDefault();
       return false;
     }
-  }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
+  }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state, isEditorControlsPatch2Enabled]);
   const onClick = useCallback(event => {
     var _inputRef$current;
     event.stopPropagation();
@@ -230,6 +233,9 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     const {
       current: element
     } = ref;
+    const {
+      removePrefixTriggerOnCancel
+    } = getPluginState(editorView.state) || {};
     const onFocusIn = event => {
       onQueryFocus();
     };
@@ -246,7 +252,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         }
         cancel({
           forceFocusOnEditor: true,
-          addPrefixTrigger: true,
+          addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
           text: cleanedInputContent(),
           setSelectionAt: isMovingRight ? CloseSelectionOptions.AFTER_TEXT_INSERTED : CloseSelectionOptions.BEFORE_TEXT_INSERTED
         });
@@ -278,7 +284,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         return;
       }
       cancel({
-        addPrefixTrigger: true,
+        addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
         text: cleanedInputContent(),
         setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED,
         forceFocusOnEditor: false
@@ -382,7 +388,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         element.removeEventListener('input', onInput);
       }
     };
-  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
+  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state, isEditorControlsPatch2Enabled]);
   useLayoutEffect(() => {
     const hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
     if (ref.current && forceFocus) {

package/dist/es2019/ui/TypeAheadList.js

@@ -12,13 +12,13 @@ import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs
 import { List } from 'react-virtualized/dist/commonjs/List';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
+import { AssistiveText } from '@atlaskit/editor-common/ui';
 import { MenuGroup } from '@atlaskit/menu';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Text, Box } from '@atlaskit/primitives';
 import { updateSelectedIndex } from '../pm-plugins/commands/update-selected-index';
 import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../pm-plugins/constants';
 import { getTypeAheadListAriaLabels, moveSelectedIndex } from '../pm-plugins/utils';
-import { AssistiveText } from './AssistiveText';
 import { ListRow } from './ListRow';
 import { TypeAheadListItem } from './TypeAheadListItem';
 import { ViewMore } from './ViewMore';

package/dist/es2019/ui/TypeAheadPopup.js

@@ -14,8 +14,10 @@ import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { closeTypeAhead } from '../pm-plugins/commands/close-type-ahead';
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
+import { getPluginState } from '../pm-plugins/utils';
 import { TypeAheadErrorFallback } from './TypeAheadErrorFallback';
 import { TypeAheadList } from './TypeAheadList';
 const DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
@@ -72,6 +74,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     featureFlagsState
   } = useSharedPluginState(api, ['featureFlags']);
   const moreElementsInQuickInsertViewEnabled = (featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.moreElementsInQuickInsertView) && triggerHandler.id === TypeAheadAvailableNodes.QUICK_INSERT;
+  const isEditorControlsPatch2Enabled = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2');
   const defaultMenuHeight = useMemo(() => moreElementsInQuickInsertViewEnabled ? DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW : DEFAULT_TYPEAHEAD_MENU_HEIGHT, [moreElementsInQuickInsertViewEnabled]);
   const startTime = useMemo(() => performance.now(),
   // In case those props changes
@@ -191,6 +194,9 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     };
   }, [anchorElement, popupsScrollableElement, getFitHeightDebounced, getFitHeight]);
   useLayoutEffect(() => {
+    const {
+      removePrefixTriggerOnCancel
+    } = getPluginState(editorView.state) || {};
     const focusOut = event => {
       var _window$getSelection;
       const {
@@ -242,7 +248,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
         }
       }
       cancel({
-        addPrefixTrigger: true,
+        addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
         setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
         forceFocusOnEditor: false
       });
@@ -258,15 +264,18 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       element === null || element === void 0 ? void 0 : element.removeEventListener('focusout', focusOut);
     };
-  }, [ref, cancel]);
+  }, [ref, cancel, editorView.state, isEditorControlsPatch2Enabled]);
 
   // TODO: ED-17443 - When you press escape on typeahead panel, it should remove focus and close the panel
   // This is the expected keyboard behaviour advised by the Accessibility team
   useLayoutEffect(() => {
+    const {
+      removePrefixTriggerOnCancel
+    } = getPluginState(editorView.state) || {};
     const escape = event => {
       if (event.key === 'Escape') {
         cancel({
-          addPrefixTrigger: true,
+          addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
           setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
           forceFocusOnEditor: true
         });
@@ -283,7 +292,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', escape);
     };
-  }, [ref, cancel]);
+  }, [ref, cancel, editorView.state, isEditorControlsPatch2Enabled]);
 
   // @ts-ignore
   const openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;

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

@@ -6,13 +6,15 @@ export var openTypeAhead = function openTypeAhead(props) {
   return function (tr) {
     var triggerHandler = props.triggerHandler,
       inputMethod = props.inputMethod,
-      query = props.query;
+      query = props.query,
+      removePrefixTriggerOnCancel = props.removePrefixTriggerOnCancel;
     tr.setMeta(pluginKey, {
       action: ACTIONS.OPEN_TYPEAHEAD_AT_CURSOR,
       params: {
         triggerHandler: triggerHandler,
         inputMethod: inputMethod,
-        query: query
+        query: query,
+        removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
       }
     });
   };
@@ -20,13 +22,15 @@ export var openTypeAhead = function openTypeAhead(props) {
 export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
   var triggerHandler = _ref.triggerHandler,
     inputMethod = _ref.inputMethod,
-    query = _ref.query;
+    query = _ref.query,
+    removePrefixTriggerOnCancel = _ref.removePrefixTriggerOnCancel;
   return function (_ref2) {
     var tr = _ref2.tr;
     openTypeAhead({
       triggerHandler: triggerHandler,
       inputMethod: inputMethod,
-      query: query
+      query: query,
+      removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
     })(tr);
     var selection = tr.selection;
     var isInline = selection instanceof NodeSelection && selection.node.type.isInline;

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

@@ -55,7 +55,8 @@ export function createPlugin(_ref) {
           errorInfo: null,
           selectedIndex: -1,
           stats: null,
-          inputMethod: null
+          inputMethod: null,
+          removePrefixTriggerOnCancel: undefined
         };
       },
       apply: function apply(tr, currentPluginState, oldEditorState, state) {