@atlaskit/editor-plugin-type-ahead/dist/es2019/ui/TypeAheadMenu.js

Type-ahead plugin for @atlaskit/editor-core

import React from 'react';
import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { updateSelectedIndex } from '../pm-plugins/commands/update-selected-index';
import { useItemInsert } from './hooks/use-item-insert';
import { TypeAheadPopup } from './TypeAheadPopup';
export const TypeAheadMenu = /*#__PURE__*/React.memo(({
  editorView,
  popupMountRef,
  typeAheadState,
  selectedIndex,
  api
}) => {
  var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
  const isOpen = typeAheadState.decorationSet.find().length > 0;
  const {
    triggerHandler,
    items,
    errorInfo,
    decorationElement,
    decorationSet,
    query
  } = typeAheadState;
  const [onItemInsert, onTextInsert, onItemMatch] = useItemInsert(
  // Ignored via go/ees005
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  triggerHandler, editorView, items, api);
  const setSelectedItem = React.useCallback(({
    index: nextIndex
  }) => {
    queueMicrotask(() => {
      updateSelectedIndex(nextIndex, api)(editorView.state, editorView.dispatch);
    });
  }, [editorView, api]);
  const insertItem = React.useCallback((mode = SelectItemMode.SELECTED, index) => {
    queueMicrotask(() => {
      onItemInsert({
        mode,
        index,
        query
      });
    });
  }, [onItemInsert, query]);
  const cancel = React.useCallback(({
    setSelectionAt,
    addPrefixTrigger,
    forceFocusOnEditor
  }) => {
    const fullQuery = addPrefixTrigger ? `${triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger}${query}` : query;
    onTextInsert({
      forceFocusOnEditor,
      setSelectionAt,
      text: fullQuery
    });
  }, [triggerHandler, onTextInsert, query]);
  React.useEffect(() => {
    if (!isOpen || !query) {
      return;
    }
    const isLastCharSpace = query[query.length - 1] === ' ';
    if (!isLastCharSpace) {
      return;
    }
    const result = onItemMatch({
      mode: SelectItemMode.SPACE,
      query: query.trim()
    });
    if (!result) {
      return;
    }
  }, [isOpen, query, onItemMatch]);

  // @ts-ignore
  const openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
  let showMoreOptionsButton = false;
  if (editorExperiment('platform_editor_controls', 'variant1')) {
    showMoreOptionsButton = !!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getMoreOptionsButtonConfig);
  }
  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || !openElementBrowserModal && items.length === 0 && !errorInfo) {
    return null;
  }
  return /*#__PURE__*/React.createElement(TypeAheadPopup, {
    editorView: editorView,
    popupsMountPoint: (_popupMountRef$curren = popupMountRef.current) === null || _popupMountRef$curren === void 0 ? void 0 : _popupMountRef$curren.popupsMountPoint,
    popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
    popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
    anchorElement: decorationElement,
    triggerHandler: triggerHandler,
    items: items,
    errorInfo: errorInfo,
    selectedIndex: selectedIndex,
    setSelectedItem: setSelectedItem,
    onItemInsert: insertItem,
    decorationSet: decorationSet,
    isEmptyQuery: !query,
    cancel: cancel,
    api: api,
    showMoreOptionsButton: showMoreOptionsButton
  });
});