@atlaskit/editor-plugin-type-ahead 13.2.1 → 13.2.3

package/dist/esm/pm-plugins/commands/insert-type-ahead-item.js

@@ -195,4 +195,99 @@ export var insertTypeAheadItem = function insertTypeAheadItem(view) {
     view.dispatch(tr);
     view.focus();
   };
+};
+var executeTypeAheadSelection = function executeTypeAheadSelection(view) {
+  return function (_ref5) {
+    var selectItem = _ref5.selectItem,
+      handler = _ref5.handler,
+      mode = _ref5.mode,
+      query = _ref5.query,
+      sourceListItem = _ref5.sourceListItem;
+    var pluginState = getPluginState(view.state);
+    if (!pluginState) {
+      return;
+    }
+    var stats = (pluginState.stats || new StatsModifier()).serialize();
+    var meta = {
+      mode: mode,
+      query: query,
+      stats: stats,
+      sourceListItem: sourceListItem
+    };
+    var tr = view.state.tr;
+    var trigger = handler.trigger;
+    var text = "".concat(trigger).concat(query);
+    if (mode === SelectItemMode.SPACE) {
+      text = text.trim().concat(' ');
+    }
+    var selectedIndex = -1;
+    var wasInsertedBySpace = mode === SelectItemMode.SPACE;
+    var textStartPosition = tr.selection.from;
+    var insertItem = function insertItem(newEditorState) {
+      var insertCallback = createInsertCallback({
+        editorState: newEditorState,
+        query: query,
+        mode: mode,
+        handler: handler,
+        wasInsertedBySpace: wasInsertedBySpace,
+        selectedIndex: selectedIndex,
+        textInserted: text,
+        textStartPosition: textStartPosition
+      });
+      var wasInsertCallbackCalled = false;
+      var insertCallbackProxy = new Proxy(insertCallback, {
+        apply: function apply(target, _thisContext, argumentsList) {
+          wasInsertCallbackCalled = true;
+          return target.apply(void 0, _toConsumableArray(argumentsList));
+        }
+      });
+      var nextTr = selectItem(newEditorState, insertCallbackProxy, meta);
+      if (!wasInsertCallbackCalled && nextTr) {
+        closeHistory(nextTr);
+        if (!nextTr.getMeta(pluginKey)) {
+          closeTypeAhead(nextTr);
+        }
+      }
+      return nextTr || false;
+    };
+    var position = {
+      start: tr.selection.from,
+      end: tr.selection.from + text.length
+    };
+    tr.setMeta(pluginKey, {
+      action: ACTIONS.INSERT_RAW_QUERY,
+      params: createDeleteRawTextCallback({
+        wasInsertedBySpace: wasInsertedBySpace,
+        selectedIndex: selectedIndex,
+        insertItem: insertItem,
+        position: position,
+        query: query,
+        trigger: trigger
+      })
+    });
+    tr.insertText(text);
+    closeHistory(tr);
+    view.dispatch(tr);
+    view.focus();
+  };
+};
+export var performTypeAheadSelection = function performTypeAheadSelection(view) {
+  return function (_ref6) {
+    var inputMethod = _ref6.inputMethod,
+      selectionHandler = _ref6.selectionHandler,
+      handler = _ref6.handler,
+      query = _ref6.query;
+    executeTypeAheadSelection(view)({
+      handler: handler,
+      mode: SelectItemMode.SELECTED,
+      query: query,
+      sourceListItem: [],
+      selectItem: function selectItem(_state, insert) {
+        return selectionHandler({
+          insert: insert,
+          source: inputMethod
+        });
+      }
+    });
+  };
 };

package/dist/esm/ui/ContentComponent.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { getTypeAheadSurface } from './registered-menu/typeAheadSurfaces';
 import { TypeAheadMenu } from './TypeAheadMenu';
 export function ContentComponent(_ref) {
   var api = _ref.api,
@@ -29,6 +30,9 @@ export function ContentComponent(_ref) {
   if (items === undefined || sections === undefined || decorationSet === undefined || errorInfo === undefined || decorationElement === undefined || query === undefined || selectedIndex === undefined) {
     return null;
   }
+  if (getTypeAheadSurface(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id)) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(TypeAheadMenu, {
     editorView: editorView,
     popupMountRef: popupMountRef

package/dist/esm/ui/InputQuery.js

@@ -82,7 +82,9 @@ var getAriaLabel = function getAriaLabel(triggerPrefix, _intl) {
   }
 };
 export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
-  var triggerQueryPrefix = _ref.triggerQueryPrefix,
+  var _ref2;
+  var activeDescendantId = _ref.activeDescendantId,
+    triggerQueryPrefix = _ref.triggerQueryPrefix,
     cancel = _ref.cancel,
     onQueryChange = _ref.onQueryChange,
     onItemSelect = _ref.onItemSelect,
@@ -93,7 +95,11 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     onQueryFocus = _ref.onQueryFocus,
     onUndoRedo = _ref.onUndoRedo,
     editorView = _ref.editorView,
-    items = _ref.items;
+    items = _ref.items,
+    listId = _ref.listId,
+    optionCount = _ref.optionCount,
+    shouldKeepOpenOnRegisteredMenu = _ref.shouldKeepOpenOnRegisteredMenu;
+  var resolvedOptionCount = (_ref2 = optionCount !== null && optionCount !== void 0 ? optionCount : items === null || items === void 0 ? void 0 : items.length) !== null && _ref2 !== void 0 ? _ref2 : 0;
   var ref = useRef(document.createElement('span'));
   var inputRef = useRef(null);
   var _useState = useState(null),
@@ -136,9 +142,9 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     var raw = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.textContent) || '';
     var text = cleanedInputContent();
     var stopDefault = false;
-    var _ref2 = getPluginState(editorView.state) || {},
-      selectedIndex = _ref2.selectedIndex,
-      removePrefixTriggerOnCancel = _ref2.removePrefixTriggerOnCancel;
+    var _ref3 = getPluginState(editorView.state) || {},
+      selectedIndex = _ref3.selectedIndex,
+      removePrefixTriggerOnCancel = _ref3.removePrefixTriggerOnCancel;
     setInFocus(true);
     switch (key) {
       case ' ':
@@ -225,8 +231,8 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     }
     var browser = getBrowserInfo();
     var element = ref.current;
-    var _ref3 = getPluginState(editorView.state) || {},
-      removePrefixTriggerOnCancel = _ref3.removePrefixTriggerOnCancel;
+    var _ref4 = getPluginState(editorView.state) || {},
+      removePrefixTriggerOnCancel = _ref4.removePrefixTriggerOnCancel;
     var onFocusIn = function onFocusIn(_event) {
       onQueryFocus();
     };
@@ -279,7 +285,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
       // Given the user is changing the focus
       // When the target is inside the TypeAhead Popup
       // Then the popup should stay open
-      if (relatedTarget instanceof HTMLElement && relatedTarget.closest && relatedTarget.closest(".".concat(TYPE_AHEAD_POPUP_CONTENT_CLASS))) {
+      if (relatedTarget instanceof HTMLElement && relatedTarget.closest && (relatedTarget.closest(".".concat(TYPE_AHEAD_POPUP_CONTENT_CLASS)) || shouldKeepOpenOnRegisteredMenu && relatedTarget.closest('[data-registered-type-ahead-menu]'))) {
         return;
       }
 
@@ -398,7 +404,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
         element.removeEventListener('input', onInput);
       }
     };
-  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state, isEditorControlsEnabled]);
+  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state, isEditorControlsEnabled, shouldKeepOpenOnRegisteredMenu]);
   useLayoutEffect(function () {
     var hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
     if (ref.current && forceFocus) {
@@ -447,9 +453,10 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     tabIndex: -1,
     onInput: isSearchPlaceholderEnabled ? onInput : undefined,
     role: "combobox",
-    "aria-controls": TYPE_AHEAD_DECORATION_ELEMENT_ID,
+    "aria-activedescendant": activeDescendantId,
+    "aria-controls": listId !== null && listId !== void 0 ? listId : TYPE_AHEAD_DECORATION_ELEMENT_ID,
     "aria-autocomplete": "list",
-    "aria-expanded": items.length !== 0,
+    "aria-expanded": resolvedOptionCount !== 0,
     "aria-labelledby": assistiveHintID,
     suppressContentEditableWarning: true,
     "data-query-prefix": triggerQueryPrefix
@@ -467,10 +474,10 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
       display: 'none'
     }
   }, intl.formatMessage(typeAheadListMessages.inputQueryAssistiveLabel)), jsx(AssistiveText, {
-    assistiveText: items.length === 0 ? intl.formatMessage(typeAheadListMessages.noSearchResultsLabel, {
-      itemsLength: items.length
+    assistiveText: resolvedOptionCount === 0 ? intl.formatMessage(typeAheadListMessages.noSearchResultsLabel, {
+      itemsLength: resolvedOptionCount
     }) : '',
-    isInFocus: items.length === 0 || isInFocus,
+    isInFocus: resolvedOptionCount === 0 || isInFocus,
     id: TYPE_AHEAD_DECORATION_ELEMENT_ID
   }));
 });

package/dist/esm/ui/WrapperTypeAhead.js

@@ -14,6 +14,8 @@ import { useItemInsert } from './hooks/use-item-insert';
 import { useLoadItems } from './hooks/use-load-items';
 import { useOnForceSelect } from './hooks/use-on-force-select';
 import { InputQuery } from './InputQuery';
+import { RegisteredTypeAheadMenu } from './registered-menu/RegisteredTypeAheadMenu';
+import { getTypeAheadSurface } from './registered-menu/typeAheadSurfaces';
 export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
   var triggerHandler = _ref.triggerHandler,
     editorView = _ref.editorView,
@@ -44,7 +46,8 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
     setQuery = _useState4[1];
   var queryRef = useRef(query);
   var editorViewRef = useRef(editorView);
-  var items = useLoadItems(triggerHandler, editorView, query, showMoreOptionsButton, api, intl);
+  var registeredSurface = getTypeAheadSurface(triggerHandler.id);
+  var items = useLoadItems(triggerHandler, editorView, query, showMoreOptionsButton, api, intl, !registeredSurface);
   useEffect(function () {
     if (!closed && fg('platform_editor_ease_of_use_metrics')) {
       var _api$metrics;
@@ -151,6 +154,25 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
   if (!triggerHandler) {
     return null;
   }
+  if (registeredSurface) {
+    return /*#__PURE__*/React.createElement(RegisteredTypeAheadMenu, {
+      anchorElement: anchorElement,
+      api: api,
+      cancel: cancel,
+      editorView: editorView,
+      forceFocus: shouldFocusCursorInsideQuery,
+      onClose: closePopup,
+      onUndoRedo: onUndoRedo,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsMountPoint: popupsMountPoint,
+      popupsScrollableElement: popupsScrollableElement,
+      query: query,
+      reopenQuery: reopenQuery,
+      setQuery: setQuery,
+      surface: registeredSurface,
+      triggerHandler: triggerHandler
+    });
+  }
   return /*#__PURE__*/React.createElement(InputQuery, {
     triggerQueryPrefix: triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger,
     onQueryChange: setQuery,

package/dist/esm/ui/hooks/use-load-items.js

@@ -8,6 +8,7 @@ import { updateListItem } from '../../pm-plugins/commands/update-list-items';
 import { buildSectionedResult } from './build-sectioned-result';
 var EMPTY_LIST_ITEM = [];
 export var useLoadItems = function useLoadItems(triggerHandler, editorView, query, showViewMore, api, intl) {
+  var enabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;
   var _useState = useState(EMPTY_LIST_ITEM),
     _useState2 = _slicedToArray(_useState, 2),
     items = _useState2[0],
@@ -17,6 +18,10 @@ export var useLoadItems = function useLoadItems(triggerHandler, editorView, quer
   var latestQueryRef = useRef(query);
   latestQueryRef.current = query;
   useEffect(function () {
+    if (!enabled) {
+      setItems(EMPTY_LIST_ITEM);
+      return;
+    }
     var requestQuery = query;
     var isStaleRequest = function isStaleRequest() {
       return latestQueryRef.current !== requestQuery;
@@ -121,7 +126,7 @@ export var useLoadItems = function useLoadItems(triggerHandler, editorView, quer
     // ignore because EditorView is mutable but we don't want to
     // call loadItems when it changes, only when the query changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [triggerHandler, query, intl]);
+  }, [triggerHandler, query, intl, enabled]);
   useEffect(function () {
     return function () {
       componentIsMounted.current = false;

package/dist/esm/ui/registered-menu/PassThrough.js

@@ -0,0 +1,4 @@
+export var PassThrough = function PassThrough(_ref) {
+  var children = _ref.children;
+  return children;
+};

package/dist/esm/ui/registered-menu/RegisteredTypeAheadMenu.js

@@ -0,0 +1,137 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles/constants';
+import { Box } from '@atlaskit/primitives/compiled';
+import { InputQuery } from '../InputQuery';
+import { buildTypeAheadMenuModel } from './buildTypeAheadMenuModel';
+import { getTypeAheadItemId } from './getTypeAheadItemId';
+import { PassThrough } from './PassThrough';
+import { TypeAheadItemRow } from './TypeAheadItemRow';
+import { TypeAheadProvider } from './TypeAheadProvider';
+var POPUP_OFFSET = [0, 8];
+export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
+  var _model$root$component, _model$root;
+  var anchorElement = _ref.anchorElement,
+    api = _ref.api,
+    cancel = _ref.cancel,
+    editorView = _ref.editorView,
+    forceFocus = _ref.forceFocus,
+    onClose = _ref.onClose,
+    onUndoRedo = _ref.onUndoRedo,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    query = _ref.query,
+    reopenQuery = _ref.reopenQuery,
+    setQuery = _ref.setQuery,
+    surface = _ref.surface,
+    triggerHandler = _ref.triggerHandler;
+  var intl = useIntl();
+  var generatedId = useId();
+  var listId = "".concat(surface.listIdPrefix, "-").concat(generatedId);
+  var menuRef = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedItemIndex = _useState2[0],
+    setSelectedItemIndex = _useState2[1];
+  var components = useMemo(function () {
+    var _api$uiControlRegistr, _api$uiControlRegistr2;
+    return (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(surface.root.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
+  }, [api, surface.root.key]);
+  var model = useMemo(function () {
+    return buildTypeAheadMenuModel(components, surface.root);
+  }, [components, surface.root]);
+  var itemKeySignature = model.items.map(function (_ref2) {
+    var key = _ref2.key;
+    return key;
+  }).join(',');
+  useLayoutEffect(function () {
+    setSelectedItemIndex(model.items.length > 0 ? 0 : -1);
+  }, [itemKeySignature, model.items.length, query]);
+  var selectActiveItem = useCallback(function (_mode) {
+    var _menuRef$current;
+    if (selectedItemIndex < 0) {
+      return;
+    }
+    (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 || (_menuRef$current = _menuRef$current.ownerDocument.getElementById(getTypeAheadItemId(listId, selectedItemIndex))) === null || _menuRef$current === void 0 || _menuRef$current.click();
+  }, [listId, selectedItemIndex]);
+  var selectNextItem = useCallback(function () {
+    setSelectedItemIndex(function (currentIndex) {
+      if (model.items.length === 0) {
+        return -1;
+      }
+      return currentIndex < 0 || currentIndex === model.items.length - 1 ? 0 : currentIndex + 1;
+    });
+  }, [model.items.length]);
+  var selectPreviousItem = useCallback(function () {
+    setSelectedItemIndex(function (currentIndex) {
+      if (model.items.length === 0) {
+        return -1;
+      }
+      return currentIndex <= 0 ? model.items.length - 1 : currentIndex - 1;
+    });
+  }, [model.items.length]);
+  var typeAheadContextValue = useMemo(function () {
+    return {
+      api: api,
+      editorView: editorView,
+      inputMethod: surface.inputMethod,
+      onClose: onClose,
+      query: query,
+      triggerHandler: triggerHandler
+    };
+  }, [api, editorView, onClose, query, surface.inputMethod, triggerHandler]);
+  var noOp = useCallback(function () {}, []);
+  var RootComponent = (_model$root$component = (_model$root = model.root) === null || _model$root === void 0 ? void 0 : _model$root.component) !== null && _model$root$component !== void 0 ? _model$root$component : PassThrough;
+  var SurfaceProvider = surface.Provider;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputQuery, {
+    activeDescendantId: selectedItemIndex >= 0 ? getTypeAheadItemId(listId, selectedItemIndex) : undefined,
+    cancel: cancel,
+    editorView: editorView,
+    forceFocus: forceFocus,
+    listId: listId,
+    onItemSelect: selectActiveItem,
+    onQueryChange: setQuery,
+    onQueryFocus: noOp,
+    onUndoRedo: onUndoRedo,
+    optionCount: model.items.length,
+    reopenQuery: reopenQuery,
+    selectNextItem: selectNextItem,
+    selectPreviousItem: selectPreviousItem,
+    shouldKeepOpenOnRegisteredMenu: true,
+    triggerQueryPrefix: triggerHandler.trigger
+  }), /*#__PURE__*/React.createElement(Popup, {
+    ariaLabel: null,
+    boundariesElement: popupsBoundariesElement,
+    fitWidth: 320,
+    mountTo: popupsMountPoint,
+    offset: POPUP_OFFSET,
+    preventOverflow: true,
+    scrollableElement: popupsScrollableElement,
+    target: anchorElement,
+    zIndex: akEditorFloatingDialogZIndex
+  }, /*#__PURE__*/React.createElement(Box, {
+    ref: menuRef,
+    backgroundColor: "elevation.surface.overlay",
+    "data-registered-type-ahead-menu": "",
+    padding: "space.050"
+  }, /*#__PURE__*/React.createElement(TypeAheadProvider, {
+    value: typeAheadContextValue
+  }, /*#__PURE__*/React.createElement(SurfaceProvider, null, /*#__PURE__*/React.createElement(RootComponent, null, /*#__PURE__*/React.createElement(Box, {
+    "aria-label": intl.formatMessage(surface.listLabel),
+    id: listId,
+    role: "listbox"
+  }, model.items.map(function (registration, itemIndex) {
+    return /*#__PURE__*/React.createElement(TypeAheadItemRow, {
+      isSelected: selectedItemIndex === itemIndex,
+      itemIndex: itemIndex,
+      Item: surface.Item,
+      key: "".concat(registration.type, ":").concat(registration.key),
+      listId: listId,
+      onItemHover: setSelectedItemIndex,
+      registration: registration
+    });
+  }))))))));
+};

package/dist/esm/ui/registered-menu/TypeAheadContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var TypeAheadContext = /*#__PURE__*/createContext(null);

package/dist/esm/ui/registered-menu/TypeAheadItemRow.js

@@ -0,0 +1,19 @@
+import React, { useCallback } from 'react';
+import { getTypeAheadItemId } from './getTypeAheadItemId';
+export var TypeAheadItemRow = function TypeAheadItemRow(_ref) {
+  var isSelected = _ref.isSelected,
+    itemIndex = _ref.itemIndex,
+    Item = _ref.Item,
+    listId = _ref.listId,
+    onItemHover = _ref.onItemHover,
+    registration = _ref.registration;
+  var onMouseMove = useCallback(function () {
+    return onItemHover(itemIndex);
+  }, [itemIndex, onItemHover]);
+  return /*#__PURE__*/React.createElement(Item, {
+    id: getTypeAheadItemId(listId, itemIndex),
+    isSelected: isSelected,
+    onMouseMove: onMouseMove,
+    registration: registration
+  });
+};

package/dist/esm/ui/registered-menu/TypeAheadProvider.js

@@ -0,0 +1,2 @@
+import { TypeAheadContext } from './TypeAheadContext';
+export var TypeAheadProvider = TypeAheadContext.Provider;

package/dist/esm/ui/registered-menu/buildTypeAheadMenuModel.js

@@ -0,0 +1,44 @@
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+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 { resolveSurface, willComponentRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
+export var buildTypeAheadMenuModel = function buildTypeAheadMenuModel(components, rootComponent) {
+  var _resolveSurface = resolveSurface(components, rootComponent),
+    root = _resolveSurface.root,
+    childrenMap = _resolveSurface.childrenMap,
+    topLevelChildren = _resolveSurface.topLevelChildren;
+  var items = [];
+  var _iterator = _createForOfIteratorHelper(topLevelChildren !== null && topLevelChildren !== void 0 ? topLevelChildren : []),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _childrenMap$get;
+      var section = _step.value;
+      if (section.type !== 'menu-section' || !willComponentRender(section, childrenMap)) {
+        continue;
+      }
+      var _iterator2 = _createForOfIteratorHelper((_childrenMap$get = childrenMap.get(section.key)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : []),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var child = _step2.value;
+          if (child.type === 'menu-item' && willComponentRender(child, childrenMap)) {
+            items.push(child);
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return {
+    items: items,
+    root: root
+  };
+};

package/dist/esm/ui/registered-menu/getTypeAheadItemId.js

@@ -0,0 +1,3 @@
+export var getTypeAheadItemId = function getTypeAheadItemId(listId, itemIndex) {
+  return "".concat(listId, "--").concat(itemIndex);
+};

package/dist/esm/ui/registered-menu/quick-insert/TypeAheadQuickInsertItem.js

@@ -0,0 +1,28 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React, { useMemo } from 'react';
+import { QuickInsertProvider } from '@atlaskit/editor-common/quick-insert/provider';
+import { useQuickInsertContext } from '@atlaskit/editor-common/quick-insert/use-quick-insert-context';
+import { PassThrough } from '../PassThrough';
+export var TypeAheadQuickInsertItem = function TypeAheadQuickInsertItem(_ref) {
+  var _registration$compone;
+  var id = _ref.id,
+    isSelected = _ref.isSelected,
+    onMouseMove = _ref.onMouseMove,
+    registration = _ref.registration;
+  var quickInsertContext = useQuickInsertContext();
+  var Component = (_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : PassThrough;
+  var contextValue = useMemo(function () {
+    return _objectSpread(_objectSpread({}, quickInsertContext), {}, {
+      item: {
+        id: id,
+        isSelected: isSelected,
+        onMouseMove: onMouseMove
+      }
+    });
+  }, [id, isSelected, onMouseMove, quickInsertContext]);
+  return /*#__PURE__*/React.createElement(QuickInsertProvider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(Component, null, null));
+};

package/dist/esm/ui/registered-menu/quick-insert/TypeAheadQuickInsertProvider.js

@@ -0,0 +1,33 @@
+import React, { useCallback, useMemo } from 'react';
+import { QuickInsertProvider } from '@atlaskit/editor-common/quick-insert/provider';
+import { performTypeAheadSelection } from '../../../pm-plugins/commands/insert-type-ahead-item';
+import { useTypeAheadContext } from '../useTypeAheadContext';
+export var TypeAheadQuickInsertProvider = function TypeAheadQuickInsertProvider(_ref) {
+  var children = _ref.children;
+  var _useTypeAheadContext = useTypeAheadContext(),
+    editorView = _useTypeAheadContext.editorView,
+    inputMethod = _useTypeAheadContext.inputMethod,
+    onClose = _useTypeAheadContext.onClose,
+    query = _useTypeAheadContext.query,
+    triggerHandler = _useTypeAheadContext.triggerHandler;
+  var select = useCallback(function (selectionHandler) {
+    onClose();
+    queueMicrotask(function () {
+      performTypeAheadSelection(editorView)({
+        handler: triggerHandler,
+        inputMethod: inputMethod,
+        query: query,
+        selectionHandler: selectionHandler
+      });
+    });
+  }, [editorView, inputMethod, onClose, query, triggerHandler]);
+  var contextValue = useMemo(function () {
+    return {
+      editorView: editorView,
+      select: select
+    };
+  }, [editorView, select]);
+  return /*#__PURE__*/React.createElement(QuickInsertProvider, {
+    value: contextValue
+  }, children);
+};

package/dist/esm/ui/registered-menu/typeAheadMenuTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/registered-menu/typeAheadSurfaces.js

@@ -0,0 +1,20 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { MENU } from '@atlaskit/editor-common/quick-insert/keys';
+import { TypeAheadAvailableNodes, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { TypeAheadQuickInsertItem } from './quick-insert/TypeAheadQuickInsertItem';
+import { TypeAheadQuickInsertProvider } from './quick-insert/TypeAheadQuickInsertProvider';
+var quickInsertSurface = {
+  inputMethod: INPUT_METHOD.QUICK_INSERT,
+  Item: TypeAheadQuickInsertItem,
+  listIdPrefix: 'quick-insert-menu',
+  listLabel: typeAheadListMessages.quickInsertInputLabel,
+  Provider: TypeAheadQuickInsertProvider,
+  root: MENU
+};
+export var getTypeAheadSurface = function getTypeAheadSurface(id) {
+  if (id === TypeAheadAvailableNodes.QUICK_INSERT && isExperimentEnabled('platform_editor_slash_command')) {
+    return quickInsertSurface;
+  }
+  return undefined;
+};

package/dist/esm/ui/registered-menu/useTypeAheadContext.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { TypeAheadContext } from './TypeAheadContext';
+export var useTypeAheadContext = function useTypeAheadContext() {
+  var value = useContext(TypeAheadContext);
+  if (!value) {
+    throw new Error('useTypeAheadContext must be used within TypeAheadProvider');
+  }
+  return value;
+};

package/dist/types/pm-plugins/commands/insert-type-ahead-item.d.ts

@@ -1,3 +1,4 @@
+import type { QuickInsertSelectionHandler } from '@atlaskit/editor-common/quick-insert/context';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import type { TypeAheadHandler, TypeAheadItem } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -9,4 +10,10 @@ type Props = {
     sourceListItem: Array<TypeAheadItem>;
 };
 export declare const insertTypeAheadItem: (view: EditorView) => ({ item, handler, mode, query, sourceListItem }: Props) => void;
+export declare const performTypeAheadSelection: (view: EditorView) => ({ inputMethod, selectionHandler, handler, query, }: {
+    handler: TypeAheadHandler;
+    inputMethod: Parameters<QuickInsertSelectionHandler>[0]['source'];
+    query: string;
+    selectionHandler: QuickInsertSelectionHandler;
+}) => void;
 export {};

package/dist/types/typeAheadPluginType.d.ts

@@ -5,6 +5,7 @@ import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import type { ContextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { MetricsPlugin } from '@atlaskit/editor-plugin-metrics';
+import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry/ui-control-registry-plugin-type';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { TypeAheadPluginOptions, TypeAheadPluginSharedState, OpenTypeAheadProps } from './types';
 type InsertTypeAheadItemProps = {
@@ -44,7 +45,8 @@ export type TypeAheadPlugin = NextEditorPlugin<'typeAhead', {
         OptionalPlugin<FeatureFlagsPlugin>,
         OptionalPlugin<ConnectivityPlugin>,
         OptionalPlugin<ContextPanelPlugin>,
-        OptionalPlugin<MetricsPlugin>
+        OptionalPlugin<MetricsPlugin>,
+        OptionalPlugin<UiControlRegistryPlugin>
     ];
     pluginConfiguration: TypeAheadPluginOptions | undefined;
     sharedState: TypeAheadPluginSharedState;