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

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypeAheadQuickInsertProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _provider = require("@atlaskit/editor-common/quick-insert/provider");
+var _insertTypeAheadItem = require("../../../pm-plugins/commands/insert-type-ahead-item");
+var _useTypeAheadContext2 = require("../useTypeAheadContext");
+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); }
+var TypeAheadQuickInsertProvider = exports.TypeAheadQuickInsertProvider = function TypeAheadQuickInsertProvider(_ref) {
+  var children = _ref.children;
+  var _useTypeAheadContext = (0, _useTypeAheadContext2.useTypeAheadContext)(),
+    editorView = _useTypeAheadContext.editorView,
+    inputMethod = _useTypeAheadContext.inputMethod,
+    onClose = _useTypeAheadContext.onClose,
+    query = _useTypeAheadContext.query,
+    triggerHandler = _useTypeAheadContext.triggerHandler;
+  var select = (0, _react.useCallback)(function (selectionHandler) {
+    onClose();
+    queueMicrotask(function () {
+      (0, _insertTypeAheadItem.performTypeAheadSelection)(editorView)({
+        handler: triggerHandler,
+        inputMethod: inputMethod,
+        query: query,
+        selectionHandler: selectionHandler
+      });
+    });
+  }, [editorView, inputMethod, onClose, query, triggerHandler]);
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      editorView: editorView,
+      select: select
+    };
+  }, [editorView, select]);
+  return /*#__PURE__*/_react.default.createElement(_provider.QuickInsertProvider, {
+    value: contextValue
+  }, children);
+};

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTypeAheadSurface = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _keys = require("@atlaskit/editor-common/quick-insert/keys");
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _TypeAheadQuickInsertItem = require("./quick-insert/TypeAheadQuickInsertItem");
+var _TypeAheadQuickInsertProvider = require("./quick-insert/TypeAheadQuickInsertProvider");
+var quickInsertSurface = {
+  inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT,
+  Item: _TypeAheadQuickInsertItem.TypeAheadQuickInsertItem,
+  listIdPrefix: 'quick-insert-menu',
+  listLabel: _typeAhead.typeAheadListMessages.quickInsertInputLabel,
+  Provider: _TypeAheadQuickInsertProvider.TypeAheadQuickInsertProvider,
+  root: _keys.MENU
+};
+var getTypeAheadSurface = exports.getTypeAheadSurface = function getTypeAheadSurface(id) {
+  if (id === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command')) {
+    return quickInsertSurface;
+  }
+  return undefined;
+};

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTypeAheadContext = void 0;
+var _react = require("react");
+var _TypeAheadContext = require("./TypeAheadContext");
+var useTypeAheadContext = exports.useTypeAheadContext = function useTypeAheadContext() {
+  var value = (0, _react.useContext)(_TypeAheadContext.TypeAheadContext);
+  if (!value) {
+    throw new Error('useTypeAheadContext must be used within TypeAheadProvider');
+  }
+  return value;
+};

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

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

package/dist/es2019/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({
   api,
@@ -31,6 +32,9 @@ export function ContentComponent({
   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/es2019/ui/InputQuery.js

@@ -81,6 +81,7 @@ const getAriaLabel = (triggerPrefix, _intl) => {
   }
 };
 export const InputQuery = /*#__PURE__*/React.memo(({
+  activeDescendantId,
   triggerQueryPrefix,
   cancel,
   onQueryChange,
@@ -92,8 +93,13 @@ export const InputQuery = /*#__PURE__*/React.memo(({
   onQueryFocus,
   onUndoRedo,
   editorView,
-  items
+  items,
+  listId,
+  optionCount,
+  shouldKeepOpenOnRegisteredMenu
 }) => {
+  var _ref;
+  const resolvedOptionCount = (_ref = optionCount !== null && optionCount !== void 0 ? optionCount : items === null || items === void 0 ? void 0 : items.length) !== null && _ref !== void 0 ? _ref : 0;
   const ref = useRef(document.createElement('span'));
   const inputRef = useRef(null);
   const [query, setQuery] = useState(null);
@@ -278,7 +284,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       // 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(`.${TYPE_AHEAD_POPUP_CONTENT_CLASS}`)) {
+      if (relatedTarget instanceof HTMLElement && relatedTarget.closest && (relatedTarget.closest(`.${TYPE_AHEAD_POPUP_CONTENT_CLASS}`) || shouldKeepOpenOnRegisteredMenu && relatedTarget.closest('[data-registered-type-ahead-menu]'))) {
         return;
       }
 
@@ -401,7 +407,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         element.removeEventListener('input', onInput);
       }
     };
-  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state, isEditorControlsEnabled]);
+  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state, isEditorControlsEnabled, shouldKeepOpenOnRegisteredMenu]);
   useLayoutEffect(() => {
     const hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
     if (ref.current && forceFocus) {
@@ -450,9 +456,10 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     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
@@ -470,10 +477,10 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       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/es2019/ui/WrapperTypeAhead.js

@@ -13,6 +13,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 const WrapperTypeAhead = /*#__PURE__*/React.memo(({
   triggerHandler,
   editorView,
@@ -38,7 +40,8 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
   const [query, setQuery] = useState(reopenQuery || '');
   const queryRef = useRef(query);
   const editorViewRef = useRef(editorView);
-  const items = useLoadItems(triggerHandler, editorView, query, showMoreOptionsButton, api, intl);
+  const registeredSurface = getTypeAheadSurface(triggerHandler.id);
+  const items = useLoadItems(triggerHandler, editorView, query, showMoreOptionsButton, api, intl, !registeredSurface);
   useEffect(() => {
     if (!closed && fg('platform_editor_ease_of_use_metrics')) {
       var _api$metrics;
@@ -141,6 +144,25 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
   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/es2019/ui/hooks/use-load-items.js

@@ -6,13 +6,17 @@ import { updateListError } from '../../pm-plugins/commands/update-list-error';
 import { updateListItem } from '../../pm-plugins/commands/update-list-items';
 import { buildSectionedResult } from './build-sectioned-result';
 const EMPTY_LIST_ITEM = [];
-export const useLoadItems = (triggerHandler, editorView, query, showViewMore, api, intl) => {
+export const useLoadItems = (triggerHandler, editorView, query, showViewMore, api, intl, enabled = true) => {
   const [items, setItems] = useState(EMPTY_LIST_ITEM);
   const componentIsMounted = useRef(true);
   const editorViewRef = useRef(editorView);
   const latestQueryRef = useRef(query);
   latestQueryRef.current = query;
   useEffect(() => {
+    if (!enabled) {
+      setItems(EMPTY_LIST_ITEM);
+      return;
+    }
     const requestQuery = query;
     const isStaleRequest = () => latestQueryRef.current !== requestQuery;
     const options = {
@@ -119,7 +123,7 @@ export const useLoadItems = (triggerHandler, editorView, query, showViewMore, ap
     // 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(() => {
     return () => {
       componentIsMounted.current = false;

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

@@ -0,0 +1,3 @@
+export const PassThrough = ({
+  children
+}) => children;

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

@@ -0,0 +1,127 @@
+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';
+const POPUP_OFFSET = [0, 8];
+export const RegisteredTypeAheadMenu = ({
+  anchorElement,
+  api,
+  cancel,
+  editorView,
+  forceFocus,
+  onClose,
+  onUndoRedo,
+  popupsBoundariesElement,
+  popupsMountPoint,
+  popupsScrollableElement,
+  query,
+  reopenQuery,
+  setQuery,
+  surface,
+  triggerHandler
+}) => {
+  var _model$root$component, _model$root;
+  const intl = useIntl();
+  const generatedId = useId();
+  const listId = `${surface.listIdPrefix}-${generatedId}`;
+  const menuRef = useRef(null);
+  const [selectedItemIndex, setSelectedItemIndex] = useState(0);
+  const components = useMemo(() => {
+    var _api$uiControlRegistr, _api$uiControlRegistr2;
+    return (_api$uiControlRegistr = api === null || api === void 0 ? 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]);
+  const model = useMemo(() => buildTypeAheadMenuModel(components, surface.root), [components, surface.root]);
+  const itemKeySignature = model.items.map(({
+    key
+  }) => key).join(',');
+  useLayoutEffect(() => {
+    setSelectedItemIndex(model.items.length > 0 ? 0 : -1);
+  }, [itemKeySignature, model.items.length, query]);
+  const selectActiveItem = useCallback(_mode => {
+    var _menuRef$current, _menuRef$current$owne;
+    if (selectedItemIndex < 0) {
+      return;
+    }
+    (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : (_menuRef$current$owne = _menuRef$current.ownerDocument.getElementById(getTypeAheadItemId(listId, selectedItemIndex))) === null || _menuRef$current$owne === void 0 ? void 0 : _menuRef$current$owne.click();
+  }, [listId, selectedItemIndex]);
+  const selectNextItem = useCallback(() => {
+    setSelectedItemIndex(currentIndex => {
+      if (model.items.length === 0) {
+        return -1;
+      }
+      return currentIndex < 0 || currentIndex === model.items.length - 1 ? 0 : currentIndex + 1;
+    });
+  }, [model.items.length]);
+  const selectPreviousItem = useCallback(() => {
+    setSelectedItemIndex(currentIndex => {
+      if (model.items.length === 0) {
+        return -1;
+      }
+      return currentIndex <= 0 ? model.items.length - 1 : currentIndex - 1;
+    });
+  }, [model.items.length]);
+  const typeAheadContextValue = useMemo(() => ({
+    api,
+    editorView,
+    inputMethod: surface.inputMethod,
+    onClose,
+    query,
+    triggerHandler
+  }), [api, editorView, onClose, query, surface.inputMethod, triggerHandler]);
+  const noOp = useCallback(() => {}, []);
+  const 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;
+  const 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((registration, itemIndex) => /*#__PURE__*/React.createElement(TypeAheadItemRow, {
+    isSelected: selectedItemIndex === itemIndex,
+    itemIndex: itemIndex,
+    Item: surface.Item,
+    key: `${registration.type}:${registration.key}`,
+    listId: listId,
+    onItemHover: setSelectedItemIndex,
+    registration: registration
+  })))))))));
+};

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { resolveSurface, willComponentRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
+export const buildTypeAheadMenuModel = (components, rootComponent) => {
+  const {
+    root,
+    childrenMap,
+    topLevelChildren
+  } = resolveSurface(components, rootComponent);
+  const items = [];
+  for (const section of topLevelChildren !== null && topLevelChildren !== void 0 ? topLevelChildren : []) {
+    if (section.type !== 'menu-section' || !willComponentRender(section, childrenMap)) {
+      continue;
+    }
+    for (const child of (_childrenMap$get = childrenMap.get(section.key)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : []) {
+      var _childrenMap$get;
+      if (child.type === 'menu-item' && willComponentRender(child, childrenMap)) {
+        items.push(child);
+      }
+    }
+  }
+  return {
+    items,
+    root
+  };
+};

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

@@ -0,0 +1 @@
+export const getTypeAheadItemId = (listId, itemIndex) => `${listId}--${itemIndex}`;

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

@@ -0,0 +1,25 @@
+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 const TypeAheadQuickInsertItem = ({
+  id,
+  isSelected,
+  onMouseMove,
+  registration
+}) => {
+  var _registration$compone;
+  const quickInsertContext = useQuickInsertContext();
+  const Component = (_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : PassThrough;
+  const contextValue = useMemo(() => ({
+    ...quickInsertContext,
+    item: {
+      id,
+      isSelected,
+      onMouseMove
+    }
+  }), [id, isSelected, onMouseMove, quickInsertContext]);
+  return /*#__PURE__*/React.createElement(QuickInsertProvider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(Component, null, null));
+};

package/dist/es2019/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 const TypeAheadQuickInsertProvider = ({
+  children
+}) => {
+  const {
+    editorView,
+    inputMethod,
+    onClose,
+    query,
+    triggerHandler
+  } = useTypeAheadContext();
+  const select = useCallback(selectionHandler => {
+    onClose();
+    queueMicrotask(() => {
+      performTypeAheadSelection(editorView)({
+        handler: triggerHandler,
+        inputMethod,
+        query,
+        selectionHandler
+      });
+    });
+  }, [editorView, inputMethod, onClose, query, triggerHandler]);
+  const contextValue = useMemo(() => ({
+    editorView,
+    select
+  }), [editorView, select]);
+  return /*#__PURE__*/React.createElement(QuickInsertProvider, {
+    value: contextValue
+  }, children);
+};

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

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

package/dist/es2019/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';
+const quickInsertSurface = {
+  inputMethod: INPUT_METHOD.QUICK_INSERT,
+  Item: TypeAheadQuickInsertItem,
+  listIdPrefix: 'quick-insert-menu',
+  listLabel: typeAheadListMessages.quickInsertInputLabel,
+  Provider: TypeAheadQuickInsertProvider,
+  root: MENU
+};
+export const getTypeAheadSurface = id => {
+  if (id === TypeAheadAvailableNodes.QUICK_INSERT && isExperimentEnabled('platform_editor_slash_command')) {
+    return quickInsertSurface;
+  }
+  return undefined;
+};

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

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