@atlaskit/editor-plugin-type-ahead 10.2.2 → 10.3.1

package/dist/es2019/ui/TypeAheadList.js

@@ -17,6 +17,7 @@ import { AssistiveText } from '@atlaskit/editor-common/ui';
 import { MenuGroup } from '@atlaskit/menu';
 import { Text, Box } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { closeTypeAhead } from '../pm-plugins/commands/close-type-ahead';
 import { updateSelectedIndex } from '../pm-plugins/commands/update-selected-index';
 import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../pm-plugins/constants';
@@ -32,6 +33,36 @@ const list = css({
     padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-150, 12px)"}`
   }
 });
+const buildTypeAheadRows = ({
+  itemsLength,
+  sections
+}) => {
+  if (sections.length === 0) {
+    return Array.from({
+      length: itemsLength
+    }, (_, itemIndex) => ({
+      type: 'item',
+      itemIndex
+    }));
+  }
+  const sortedSections = [...sections].sort((left, right) => left.startIndex - right.startIndex);
+  const sectionsByStartIndex = new Map(sortedSections.map(section => [section.startIndex, section]));
+  const rows = [];
+  for (let itemIndex = 0; itemIndex < itemsLength; itemIndex++) {
+    const section = sectionsByStartIndex.get(itemIndex);
+    if (section) {
+      rows.push({
+        type: 'section',
+        section
+      });
+    }
+    rows.push({
+      type: 'item',
+      itemIndex
+    });
+  }
+  return rows;
+};
 const TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(({
   numberOfResults
 }) => {
@@ -48,6 +79,7 @@ const TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(({
 });
 const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   items,
+  sections,
   emptyItem,
   selectedIndex,
   editorView,
@@ -61,7 +93,7 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   showMoreOptionsButton,
   onMoreOptionsClicked
 }) => {
-  var _triggerHandler$getMo, _decorationElement$qu2;
+  var _itemRowIndexByItemIn, _triggerHandler$getMo, _decorationElement$qu2;
   const listRef = useRef();
   const listContainerRef = useRef(null);
   const lastInputMethodRef = useRef('keyboard');
@@ -82,6 +114,21 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     fixedWidth: true,
     defaultHeight: LIST_ITEM_ESTIMATED_HEIGHT
   }));
+  const listRows = useMemo(() => buildTypeAheadRows({
+    itemsLength,
+    sections: sections || []
+  }), [itemsLength, sections]);
+  const itemRowIndexByItemIndex = useMemo(() => {
+    const rowIndexByItemIndex = new Map();
+    listRows.forEach((row, rowIndex) => {
+      if (row.type === 'item') {
+        rowIndexByItemIndex.set(row.itemIndex, rowIndex);
+      }
+    });
+    return rowIndexByItemIndex;
+  }, [listRows]);
+  const populatedSectionCount = useMemo(() => listRows.filter(row => row.type === 'section').length, [listRows]);
+  const selectedItemRowIndex = selectedIndex >= 0 ? (_itemRowIndexByItemIn = itemRowIndexByItemIndex.get(selectedIndex)) !== null && _itemRowIndexByItemIn !== void 0 ? _itemRowIndexByItemIn : -1 : -1;
   const onItemsRendered = useCallback(props => {
     lastVisibleIndexes.current = props;
   }, []);
@@ -132,28 +179,32 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         const isViewMoreSelected = showMoreOptionsButton && selectedIndex === itemsLength;
-        const isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex ||
+        const isSelectedItemVisible = selectedItemRowIndex >= lastVisibleStartIndex && selectedItemRowIndex <= lastVisibleStopIndex ||
         // view more is always visible, hence no scrolling
         isViewMoreSelected;
 
         //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
         if (!isSelectedItemVisible && selectedIndex !== -1) {
-          listRef.current.scrollToRow(selectedIndex);
+          listRef.current.scrollToRow(selectedItemRowIndex);
         } else if (selectedIndex === -1) {
           listRef.current.scrollToRow(0);
         }
       });
     });
-  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showMoreOptionsButton]);
-  const onMouseMove = (event, index) => {
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showMoreOptionsButton, selectedItemRowIndex]);
+  const onMouseMove = (event, row) => {
+    if (row.type !== 'item') {
+      return;
+    }
+    const itemIndex = row.itemIndex;
     event.preventDefault();
     event.stopPropagation();
-    if (selectedIndex === index) {
+    if (selectedIndex === itemIndex) {
       return;
     }
     mouseMovedRef.current = true;
     lastInputMethodRef.current = 'mouse';
-    updateSelectedIndex(index, api)(editorView.state, editorView.dispatch);
+    updateSelectedIndex(itemIndex, api)(editorView.state, editorView.dispatch);
   };
   useLayoutEffect(() => {
     if (mouseMovedRef.current) {
@@ -167,17 +218,17 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
       return;
     }
     const isViewMoreSelected = showMoreOptionsButton && selectedIndex === itemsLength;
-    const isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex ||
+    const isSelectedItemVisible = selectedItemRowIndex >= lastVisibleStartIndex && selectedItemRowIndex <= lastVisibleStopIndex ||
     // view more is always visible, hence no scrolling
     isViewMoreSelected;
 
     //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
     if (!isSelectedItemVisible && selectedIndex !== -1) {
-      listRef.current.scrollToRow(selectedIndex);
+      listRef.current.scrollToRow(selectedItemRowIndex);
     } else if (selectedIndex === -1) {
       listRef.current.scrollToRow(0);
     }
-  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showMoreOptionsButton]);
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showMoreOptionsButton, selectedItemRowIndex]);
   useLayoutEffect(() => {
     setCache(new CellMeasurerCache({
       fixedWidth: true,
@@ -193,10 +244,10 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
         listContainerRef.current.firstChild.scrollTo(0, 0);
       }
     });
-  }, [items]);
+  }, [items, sections]);
   useLayoutEffect(() => {
     // Exclude view more item from the count
-    const itemsToRender = showMoreOptionsButton ? items.slice(0, -1) : items;
+    const itemsToRender = editorExperiment('platform_editor_agent_mentions', true) ? listRows : showMoreOptionsButton ? items.slice(0, -1) : items;
     const height = Math.min(
     // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
     itemsToRender.reduce((prevValue, currentValue, index) => {
@@ -205,7 +256,7 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
       });
     }, 0), fitHeight);
     setHeight(height);
-  }, [items, cache, fitHeight, showMoreOptionsButton]);
+  }, [listRows, items, cache, fitHeight, showMoreOptionsButton]);
   useLayoutEffect(() => {
     if (!listContainerRef.current) {
       return;
@@ -286,7 +337,10 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     isScrolling,
     isVisible
   }) => {
-    const currentItem = items[index];
+    const currentRow = listRows[index];
+    if (!currentRow) {
+      return null;
+    }
     return jsx(CellMeasurer, {
       key: key,
       cache: cache,
@@ -305,20 +359,28 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
       isScrolling: isScrolling
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       ,
-      onMouseMove: e => onMouseMove(e, index)
-    }, jsx(TypeAheadListItem, {
-      key: items[index].title,
-      item: currentItem,
+      onMouseMove: e => onMouseMove(e, currentRow)
+    }, currentRow.type === 'section' ? populatedSectionCount === 1 ? null : jsx(Box, {
+      paddingInline: "space.150",
+      paddingBlock: "space.050"
+    }, jsx(Text, {
+      as: "span",
+      size: "small",
+      color: "color.text.subtle",
+      weight: "medium"
+    }, currentRow.section.title)) : jsx(TypeAheadListItem, {
+      key: items[currentRow.itemIndex].title,
+      item: items[currentRow.itemIndex],
       firstOnlineSupportedIndex: firstOnlineSupportedRow,
       itemsLength: itemsLength,
-      itemIndex: index,
+      itemIndex: currentRow.itemIndex,
       selectedIndex: selectedIndex
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       ,
-      onItemClick: (mode, index) => {
-        actions.onItemClick(mode, index, INPUT_METHOD.MOUSE);
+      onItemClick: (mode, itemIndex) => {
+        actions.onItemClick(mode, itemIndex, INPUT_METHOD.MOUSE);
       },
-      ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
+      ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, items[currentRow.itemIndex]).listItemAriaLabel,
       moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
       api: api,
       lastInputMethodRef: lastInputMethodRef
@@ -351,7 +413,7 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     ref: listRef
     // Skip rendering the view more button in the list
     ,
-    rowCount: itemsLength,
+    rowCount: listRows.length,
     rowHeight: cache.rowHeight,
     onRowsRendered: onItemsRendered,
     width: LIST_WIDTH,

package/dist/es2019/ui/TypeAheadMenu.js

@@ -17,6 +17,7 @@ export const TypeAheadMenu = /*#__PURE__*/React.memo(({
   const {
     triggerHandler,
     items,
+    sections = [],
     errorInfo,
     decorationElement,
     decorationSet,
@@ -94,6 +95,7 @@ export const TypeAheadMenu = /*#__PURE__*/React.memo(({
     anchorElement: decorationElement,
     triggerHandler: triggerHandler,
     items: items,
+    sections: sections,
     emptyItem: emptyItem,
     errorInfo: errorInfo,
     selectedIndex: selectedIndex,

package/dist/es2019/ui/TypeAheadPopup.js

@@ -61,6 +61,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     popupsBoundariesElement,
     popupsScrollableElement,
     items,
+    sections = [],
     emptyItem,
     errorInfo,
     selectedIndex,
@@ -341,6 +342,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     triggerHandler: triggerHandler
   }), jsx(TypeAheadList, {
     items: items,
+    sections: sections,
     emptyItem: emptyItem,
     selectedIndex: selectedIndex
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)

package/dist/es2019/ui/WrapperTypeAhead.js

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
 import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -31,11 +32,12 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
   if (editorExperiment('platform_editor_controls', 'variant1')) {
     showMoreOptionsButton = !!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getMoreOptionsButtonConfig);
   }
+  const intl = useIntl();
   const [closed, setClosed] = useState(false);
   const [query, setQuery] = useState(reopenQuery || '');
   const queryRef = useRef(query);
   const editorViewRef = useRef(editorView);
-  const items = useLoadItems(triggerHandler, editorView, query, showMoreOptionsButton, api);
+  const items = useLoadItems(triggerHandler, editorView, query, showMoreOptionsButton, api, intl);
   useEffect(() => {
     if (!closed && fg('platform_editor_ease_of_use_metrics')) {
       var _api$metrics;

package/dist/es2019/ui/hooks/build-sectioned-result.js

@@ -0,0 +1,83 @@
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+export const buildSectionedResult = ({
+  items,
+  triggerHandler,
+  intl
+}) => {
+  var _triggerHandler$getSe;
+  if (!editorExperiment('platform_editor_agent_mentions', true) || !intl) {
+    return {
+      items,
+      sections: []
+    };
+  }
+  const sectionDefinitions = (_triggerHandler$getSe = triggerHandler.getSections) === null || _triggerHandler$getSe === void 0 ? void 0 : _triggerHandler$getSe.call(triggerHandler, {
+    intl
+  });
+  if (!sectionDefinitions || sectionDefinitions.length === 0) {
+    return {
+      items,
+      sections: []
+    };
+  }
+
+  // Track which item indexes have been claimed by a section, or excluded (matched a section but
+  // cut by that section's limit). Items excluded by limit should not appear anywhere in the output.
+  const assignedToSection = new Set();
+  const excludedByLimit = new Set();
+  const groupedBySection = new Map();
+  for (const section of sectionDefinitions) {
+    const matchingIndexes = [];
+    for (let i = 0; i < items.length; i++) {
+      if (assignedToSection.has(i) || excludedByLimit.has(i)) {
+        continue;
+      }
+      if (section.filter(items[i])) {
+        matchingIndexes.push(i);
+      }
+    }
+    const acceptedIndexes = section.limit !== undefined ? matchingIndexes.slice(0, section.limit) : matchingIndexes;
+    const rejectedByLimit = matchingIndexes.slice(acceptedIndexes.length);
+    for (const i of acceptedIndexes) {
+      assignedToSection.add(i);
+    }
+    for (const i of rejectedByLimit) {
+      excludedByLimit.add(i);
+    }
+    if (acceptedIndexes.length === 0) {
+      continue;
+    }
+    groupedBySection.set(section.id, {
+      indexes: acceptedIndexes,
+      section
+    });
+  }
+  const flattenedItems = [];
+  const sections = [];
+  for (const section of sectionDefinitions) {
+    const grouped = groupedBySection.get(section.id);
+    if (!grouped) {
+      continue;
+    }
+    const startIndex = flattenedItems.length;
+    flattenedItems.push(...grouped.indexes.map(i => items[i]));
+    const endIndex = flattenedItems.length - 1;
+    sections.push({
+      endIndex,
+      id: section.id,
+      startIndex,
+      title: section.title
+    });
+  }
+
+  // Append items not claimed by any section and not excluded by a limit
+  for (let i = 0; i < items.length; i++) {
+    if (!assignedToSection.has(i) && !excludedByLimit.has(i)) {
+      flattenedItems.push(items[i]);
+    }
+  }
+  return {
+    items: flattenedItems,
+    sections
+  };
+};

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

@@ -4,8 +4,9 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearListError } from '../../pm-plugins/commands/clear-list-error';
 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) => {
+export const useLoadItems = (triggerHandler, editorView, query, showViewMore, api, intl) => {
   const [items, setItems] = useState(EMPTY_LIST_ITEM);
   const componentIsMounted = useRef(true);
   const editorViewRef = useRef(editorView);
@@ -35,7 +36,15 @@ export const useLoadItems = (triggerHandler, editorView, query, showViewMore, ap
       const emptyItem = result.length === 0 && expValEquals('platform_editor_insert_menu_ai', 'isEnabled', true) ? (_triggerHandler$getEm = triggerHandler.getEmptyItem) === null || _triggerHandler$getEm === void 0 ? void 0 : _triggerHandler$getEm.call(triggerHandler, {
         editorState: editorView.state
       }) : undefined;
-      const list = result.length > 0 ? result : emptyItem ? [emptyItem] : EMPTY_LIST_ITEM;
+      const rawList = result.length > 0 ? result : emptyItem ? [emptyItem] : EMPTY_LIST_ITEM;
+      const {
+        items: list,
+        sections
+      } = buildSectionedResult({
+        items: rawList,
+        triggerHandler,
+        intl: intl !== null && intl !== void 0 ? intl : null
+      });
       if (componentIsMounted.current) {
         setItems(list);
       }
@@ -45,7 +54,7 @@ export const useLoadItems = (triggerHandler, editorView, query, showViewMore, ap
         title: 'View more'
       };
       queueMicrotask(() => {
-        updateListItem(showViewMore ? list.concat(viewMoreItem) : list)(view.state, view.dispatch);
+        updateListItem(showViewMore ? list.concat(viewMoreItem) : list, sections)(view.state, view.dispatch);
       });
     }).catch(e => {
       if (editorExperiment('platform_editor_offline_editing_web', true)) {
@@ -63,7 +72,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]);
+  }, [triggerHandler, query, intl]);
   useEffect(() => {
     return () => {
       componentIsMounted.current = false;

package/dist/esm/entry-points/commands.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { openTypeAhead, openTypeAheadAtCursor } from '../pm-plugins/commands/open-typeahead-at-cursor';

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

@@ -1,5 +1,6 @@
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTIONS } from '../actions';
 import { pluginKey } from '../key';
 export var openTypeAhead = function openTypeAhead(props) {
@@ -43,7 +44,7 @@ export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
       // delete 1 pos before wherever selection is now - that will delete the empty space
       tr.delete(tr.selection.from - 1, tr.selection.from);
     } else {
-      var _selection$$head, _selection$$head$pare, _selection$$head$pare2;
+      var _selection$$head$pare, _selection$$head$pare2, _selection$$head;
       if (selection instanceof NodeSelection) {
         if (isInline) {
           tr.deleteSelection();
@@ -72,7 +73,11 @@ export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
       // being inserted due to composition by checking if we have the trigger
       // directly before the typeahead. This should not happen unless it has
       // been eroneously added because we require whitespace/newline for typeahead.
-      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) && (_selection$$head$pare = (_selection$$head$pare2 = selection.$head.parent.textContent).endsWith) !== null && _selection$$head$pare !== void 0 && _selection$$head$pare.call(_selection$$head$pare2, triggerHandler.trigger)) {
+      // 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 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/commands/update-list-items.js

@@ -1,12 +1,14 @@
 import { ACTIONS } from '../actions';
 import { pluginKey as typeAheadPluginKey } from '../key';
 export var updateListItem = function updateListItem(items) {
+  var sections = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   return function (state, dispatch) {
     var tr = state.tr;
     tr.setMeta(typeAheadPluginKey, {
       action: ACTIONS.UPDATE_LIST_ITEMS,
       params: {
-        items: items
+        items: items,
+        sections: sections
       }
     });
     if (dispatch) {

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

@@ -1,9 +1,12 @@
 import { InsertTypeAheadStep } from '@atlaskit/adf-schema/steps';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 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';
+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';
 import { factoryDecorations } from './decorations';
 import { isInsertionTransaction } from './isInsertionTransaction';
@@ -43,6 +46,11 @@ export function createPlugin(_ref) {
     typeAheadHandlers: typeAheadHandlers,
     popupMountRef: popupMountRef
   });
+
+  // Tracks a wide-char trigger handler detected during IME composition (e.g. ／).
+  // Set by compositionupdate, cleared by compositionend. Used by handleKeyDown
+  // to intercept Enter that confirms the composition.
+  var pendingWideSlashHandler = null;
   return new SafePlugin({
     key: pluginKey,
     state: {
@@ -53,6 +61,7 @@ export function createPlugin(_ref) {
           decorationSet: DecorationSet.empty,
           decorationElement: null,
           items: [],
+          sections: [],
           errorInfo: null,
           selectedIndex: -1,
           stats: null,
@@ -94,8 +103,53 @@ export function createPlugin(_ref) {
         var _pluginKey$getState;
         return (_pluginKey$getState = pluginKey.getState(state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.decorationSet;
       },
+      handleKeyDown: function handleKeyDown(view, event) {
+        // When composing a wide-char trigger (e.g. ／), intercept the Enter key
+        // that confirms the composition so we can open the typeahead instead.
+        if (pendingWideSlashHandler && event.isComposing && (event.key === 'Enter' || event.keyCode === 13)) {
+          var handler = pendingWideSlashHandler;
+          pendingWideSlashHandler = null;
+          // Defer until ProseMirror has flushed the composed text into its state.
+          setTimeout(function () {
+            var command = openTypeAheadAtCursor({
+              triggerHandler: handler,
+              inputMethod: INPUT_METHOD.KEYBOARD
+            });
+            var tr = command({
+              tr: view.state.tr
+            });
+            if (tr) {
+              view.dispatch(tr);
+            }
+          }, 0);
+          return true;
+        }
+        return false;
+      },
       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).
+          // 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 entire composition is a trigger character
+              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) {
+          // Clear the pending handler when composition ends (cancelled or committed
+          // via a non-Enter key like Space, which we don't want to intercept).
+          pendingWideSlashHandler = null;
           return false;
         },
         click: function click(view, event) {

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

@@ -69,6 +69,7 @@ export var createReducer = function createReducer(_ref) {
       inputMethod: inputMethod,
       selectedIndex: typeof selectedIndex === 'number' ? selectedIndex : -1,
       items: [],
+      sections: [],
       query: reopenQuery || '',
       removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
     });
@@ -87,6 +88,7 @@ export var createReducer = function createReducer(_ref) {
       stats: null,
       triggerHandler: undefined,
       items: [],
+      sections: [],
       removePrefixTriggerOnCancel: undefined
     });
   };
@@ -137,13 +139,17 @@ export var createReducer = function createReducer(_ref) {
       return _objectSpread(_objectSpread({}, currentPluginState), {}, {
         errorInfo: errorInfo,
         items: [],
+        sections: [],
         selectedIndex: -1
       });
     } else if (shouldUpdateListItems) {
-      var items = params.items;
+      var items = params.items,
+        _params$sections = params.sections,
+        sections = _params$sections === void 0 ? [] : _params$sections;
       var selectedIndex = currentPluginState.selectedIndex;
       return _objectSpread(_objectSpread({}, currentPluginState), {}, {
         items: items,
+        sections: sections,
         selectedIndex: Math.max(selectedIndex >= items.length ? items.length - 1 : selectedIndex, -1)
       });
     } else if (shouldUpdateSelectedIndex) {

package/dist/esm/typeAheadPlugin.js

@@ -206,7 +206,7 @@ export var typeAheadPlugin = function typeAheadPlugin(_ref) {
       }];
     },
     getSharedState: function getSharedState(editorState) {
-      var _state$decorationSet, _state$decorationElem, _state$items, _state$errorInfo, _state$selectedIndex;
+      var _state$decorationSet, _state$decorationElem, _state$items, _state$sections, _state$errorInfo, _state$selectedIndex;
       if (!editorState) {
         return {
           query: '',
@@ -217,6 +217,7 @@ export var typeAheadPlugin = function typeAheadPlugin(_ref) {
           decorationElement: null,
           triggerHandler: undefined,
           items: [],
+          sections: [],
           errorInfo: null,
           selectedIndex: 0
         };
@@ -232,6 +233,7 @@ export var typeAheadPlugin = function typeAheadPlugin(_ref) {
         decorationElement: (_state$decorationElem = state === null || state === void 0 ? void 0 : state.decorationElement) !== null && _state$decorationElem !== void 0 ? _state$decorationElem : null,
         triggerHandler: state === null || state === void 0 ? void 0 : state.triggerHandler,
         items: (_state$items = state === null || state === void 0 ? void 0 : state.items) !== null && _state$items !== void 0 ? _state$items : [],
+        sections: (_state$sections = state === null || state === void 0 ? void 0 : state.sections) !== null && _state$sections !== void 0 ? _state$sections : [],
         errorInfo: (_state$errorInfo = state === null || state === void 0 ? void 0 : state.errorInfo) !== null && _state$errorInfo !== void 0 ? _state$errorInfo : null,
         selectedIndex: (_state$selectedIndex = state === null || state === void 0 ? void 0 : state.selectedIndex) !== null && _state$selectedIndex !== void 0 ? _state$selectedIndex : 0
       };

package/dist/esm/ui/ContentComponent.js

@@ -6,25 +6,27 @@ export function ContentComponent(_ref) {
     editorView = _ref.editorView,
     popupMountRef = _ref.popupMountRef;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['typeAhead'], function (states) {
-      var _states$typeAheadStat, _states$typeAheadStat2, _states$typeAheadStat3, _states$typeAheadStat4, _states$typeAheadStat5, _states$typeAheadStat6, _states$typeAheadStat7;
+      var _states$typeAheadStat, _states$typeAheadStat2, _states$typeAheadStat3, _states$typeAheadStat4, _states$typeAheadStat5, _states$typeAheadStat6, _states$typeAheadStat7, _states$typeAheadStat8;
       return {
         triggerHandler: (_states$typeAheadStat = states.typeAheadState) === null || _states$typeAheadStat === void 0 ? void 0 : _states$typeAheadStat.triggerHandler,
         items: (_states$typeAheadStat2 = states.typeAheadState) === null || _states$typeAheadStat2 === void 0 ? void 0 : _states$typeAheadStat2.items,
-        errorInfo: (_states$typeAheadStat3 = states.typeAheadState) === null || _states$typeAheadStat3 === void 0 ? void 0 : _states$typeAheadStat3.errorInfo,
-        decorationElement: (_states$typeAheadStat4 = states.typeAheadState) === null || _states$typeAheadStat4 === void 0 ? void 0 : _states$typeAheadStat4.decorationElement,
-        decorationSet: (_states$typeAheadStat5 = states.typeAheadState) === null || _states$typeAheadStat5 === void 0 ? void 0 : _states$typeAheadStat5.decorationSet,
-        query: (_states$typeAheadStat6 = states.typeAheadState) === null || _states$typeAheadStat6 === void 0 ? void 0 : _states$typeAheadStat6.query,
-        selectedIndex: (_states$typeAheadStat7 = states.typeAheadState) === null || _states$typeAheadStat7 === void 0 ? void 0 : _states$typeAheadStat7.selectedIndex
+        sections: (_states$typeAheadStat3 = states.typeAheadState) === null || _states$typeAheadStat3 === void 0 ? void 0 : _states$typeAheadStat3.sections,
+        errorInfo: (_states$typeAheadStat4 = states.typeAheadState) === null || _states$typeAheadStat4 === void 0 ? void 0 : _states$typeAheadStat4.errorInfo,
+        decorationElement: (_states$typeAheadStat5 = states.typeAheadState) === null || _states$typeAheadStat5 === void 0 ? void 0 : _states$typeAheadStat5.decorationElement,
+        decorationSet: (_states$typeAheadStat6 = states.typeAheadState) === null || _states$typeAheadStat6 === void 0 ? void 0 : _states$typeAheadStat6.decorationSet,
+        query: (_states$typeAheadStat7 = states.typeAheadState) === null || _states$typeAheadStat7 === void 0 ? void 0 : _states$typeAheadStat7.query,
+        selectedIndex: (_states$typeAheadStat8 = states.typeAheadState) === null || _states$typeAheadStat8 === void 0 ? void 0 : _states$typeAheadStat8.selectedIndex
       };
     }),
     triggerHandler = _useSharedPluginState.triggerHandler,
     items = _useSharedPluginState.items,
+    sections = _useSharedPluginState.sections,
     errorInfo = _useSharedPluginState.errorInfo,
     decorationElement = _useSharedPluginState.decorationElement,
     decorationSet = _useSharedPluginState.decorationSet,
     query = _useSharedPluginState.query,
     selectedIndex = _useSharedPluginState.selectedIndex;
-  if (items === undefined || decorationSet === undefined || errorInfo === undefined || decorationElement === undefined || query === undefined || selectedIndex === undefined) {
+  if (items === undefined || sections === undefined || decorationSet === undefined || errorInfo === undefined || decorationElement === undefined || query === undefined || selectedIndex === undefined) {
     return null;
   }
   return /*#__PURE__*/React.createElement(TypeAheadMenu, {
@@ -35,6 +37,7 @@ export function ContentComponent(_ref) {
     typeAheadState: {
       triggerHandler: triggerHandler,
       items: items,
+      sections: sections,
       errorInfo: errorInfo,
       decorationElement: decorationElement,
       decorationSet: decorationSet,