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

Type-ahead plugin for @atlaskit/editor-core

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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 var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
  var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
  var editorView = _ref.editorView,
    popupMountRef = _ref.popupMountRef,
    typeAheadState = _ref.typeAheadState,
    selectedIndex = _ref.selectedIndex,
    api = _ref.api;
  var isOpen = typeAheadState.decorationSet.find().length > 0;
  var triggerHandler = typeAheadState.triggerHandler,
    items = typeAheadState.items,
    errorInfo = typeAheadState.errorInfo,
    decorationElement = typeAheadState.decorationElement,
    decorationSet = typeAheadState.decorationSet,
    query = typeAheadState.query;
  var _useItemInsert = useItemInsert(
    // Ignored via go/ees005
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    triggerHandler, editorView, items, api),
    _useItemInsert2 = _slicedToArray(_useItemInsert, 3),
    onItemInsert = _useItemInsert2[0],
    onTextInsert = _useItemInsert2[1],
    onItemMatch = _useItemInsert2[2];
  var setSelectedItem = React.useCallback(function (_ref2) {
    var nextIndex = _ref2.index;
    queueMicrotask(function () {
      updateSelectedIndex(nextIndex, api)(editorView.state, editorView.dispatch);
    });
  }, [editorView, api]);
  var insertItem = React.useCallback(function () {
    var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : SelectItemMode.SELECTED;
    var index = arguments.length > 1 ? arguments[1] : undefined;
    queueMicrotask(function () {
      onItemInsert({
        mode: mode,
        index: index,
        query: query
      });
    });
  }, [onItemInsert, query]);
  var cancel = React.useCallback(function (_ref3) {
    var setSelectionAt = _ref3.setSelectionAt,
      addPrefixTrigger = _ref3.addPrefixTrigger,
      forceFocusOnEditor = _ref3.forceFocusOnEditor;
    var fullQuery = addPrefixTrigger ? "".concat(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger).concat(query) : query;
    onTextInsert({
      forceFocusOnEditor: forceFocusOnEditor,
      setSelectionAt: setSelectionAt,
      text: fullQuery
    });
  }, [triggerHandler, onTextInsert, query]);
  React.useEffect(function () {
    if (!isOpen || !query) {
      return;
    }
    var isLastCharSpace = query[query.length - 1] === ' ';
    if (!isLastCharSpace) {
      return;
    }
    var result = onItemMatch({
      mode: SelectItemMode.SPACE,
      query: query.trim()
    });
    if (!result) {
      return;
    }
  }, [isOpen, query, onItemMatch]);

  // @ts-ignore
  var openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
  var 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
  });
});