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

Type-ahead plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TypeAheadMenu = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _typeAhead = require("@atlaskit/editor-common/type-ahead");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _updateSelectedIndex = require("../pm-plugins/commands/update-selected-index");
var _useItemInsert3 = require("./hooks/use-item-insert");
var _TypeAheadPopup = require("./TypeAheadPopup");
var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.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 = (0, _useItemInsert3.useItemInsert)(
    // Ignored via go/ees005
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    triggerHandler, editorView, items, api),
    _useItemInsert2 = (0, _slicedToArray2.default)(_useItemInsert, 3),
    onItemInsert = _useItemInsert2[0],
    onTextInsert = _useItemInsert2[1],
    onItemMatch = _useItemInsert2[2];
  var setSelectedItem = _react.default.useCallback(function (_ref2) {
    var nextIndex = _ref2.index;
    queueMicrotask(function () {
      (0, _updateSelectedIndex.updateSelectedIndex)(nextIndex, api)(editorView.state, editorView.dispatch);
    });
  }, [editorView, api]);
  var insertItem = _react.default.useCallback(function () {
    var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _typeAhead.SelectItemMode.SELECTED;
    var index = arguments.length > 1 ? arguments[1] : undefined;
    queueMicrotask(function () {
      onItemInsert({
        mode: mode,
        index: index,
        query: query
      });
    });
  }, [onItemInsert, query]);
  var cancel = _react.default.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.default.useEffect(function () {
    if (!isOpen || !query) {
      return;
    }
    var isLastCharSpace = query[query.length - 1] === ' ';
    if (!isLastCharSpace) {
      return;
    }
    var result = onItemMatch({
      mode: _typeAhead.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 ((0, _experiments.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.default.createElement(_TypeAheadPopup.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
  });
});