@atlaskit/editor-core 148.0.0 → 149.0.3

package/dist/cjs/plugins/type-ahead/ui/TypeAheadPopup.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypeAheadPopup = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+
+var _editorCommon = require("@atlaskit/editor-common");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _math = require("@atlaskit/theme/math");
+
+var _analytics = require("../../analytics");
+
+var _TypeAheadList = require("./TypeAheadList");
+
+var _templateObject;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var TypeAheadContent = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px ", ", 0 4px 8px -2px ", ";\n  padding: ", "px 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), _colors.N0, (0, _constants.borderRadius)(), _colors.N60A, _colors.N50A, (0, _math.divide)(_constants.gridSize, 2));
+
+var Highlight = function Highlight(_ref) {
+  var state = _ref.state,
+      triggerHandler = _ref.triggerHandler;
+
+  if (!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getHighlight)) {
+    return null;
+  }
+
+  var highlight = triggerHandler.getHighlight(state);
+  return highlight;
+};
+
+var OFFSET = [0, 8];
+
+var TypeAheadPopup = /*#__PURE__*/_react.default.memo(function (props) {
+  var editorView = props.editorView,
+      triggerHandler = props.triggerHandler,
+      anchorElement = props.anchorElement,
+      popupsMountPoint = props.popupsMountPoint,
+      popupsBoundariesElement = props.popupsBoundariesElement,
+      popupsScrollableElement = props.popupsScrollableElement,
+      items = props.items,
+      selectedIndex = props.selectedIndex,
+      setSelectedItem = props.setSelectedItem,
+      onItemInsert = props.onItemInsert,
+      fireAnalyticsCallback = props.fireAnalyticsCallback,
+      isEmptyQuery = props.isEmptyQuery;
+  var startTime = (0, _react.useMemo)(function () {
+    return performance.now();
+  }, // In case those props changes
+  // we need to recreate the startTime
+  [items, isEmptyQuery, fireAnalyticsCallback, triggerHandler] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  (0, _react.useEffect)(function () {
+    if (!fireAnalyticsCallback) {
+      return;
+    }
+
+    var stopTime = performance.now();
+    var time = stopTime - startTime;
+    fireAnalyticsCallback({
+      payload: {
+        action: _analytics.ACTION.RENDERED,
+        actionSubject: _analytics.ACTION_SUBJECT.TYPEAHEAD,
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          time: time,
+          items: items.length,
+          initial: isEmptyQuery
+        }
+      }
+    });
+  }, [startTime, items, fireAnalyticsCallback, isEmptyQuery, // In case the current triggerHandler changes
+  // e.g: Inserting a mention using the quick insert
+  // we need to send the event again
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  triggerHandler]);
+  (0, _react.useEffect)(function () {
+    if (!fireAnalyticsCallback) {
+      return;
+    }
+
+    fireAnalyticsCallback({
+      payload: {
+        action: _analytics.ACTION.VIEWED,
+        actionSubject: _analytics.ACTION_SUBJECT.TYPEAHEAD_ITEM,
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          index: selectedIndex,
+          items: items.length
+        }
+      }
+    });
+  }, [items, fireAnalyticsCallback, selectedIndex, // In case the current triggerHandler changes
+  // e.g: Inserting a mention using the quick insert
+  // we need to send the event again
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  triggerHandler]);
+  return /*#__PURE__*/_react.default.createElement(_editorCommon.Popup, {
+    zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
+    target: anchorElement,
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    fitHeight: 300,
+    fitWidth: 340,
+    offset: OFFSET
+  }, /*#__PURE__*/_react.default.createElement(TypeAheadContent, {
+    className: "fabric-editor-typeahead"
+  }, /*#__PURE__*/_react.default.createElement(Highlight, {
+    state: editorView.state,
+    triggerHandler: triggerHandler
+  }), /*#__PURE__*/_react.default.createElement(_TypeAheadList.TypeAheadList, {
+    items: items,
+    selectedIndex: selectedIndex,
+    onItemHover: setSelectedItem,
+    onItemClick: onItemInsert
+  })));
+});
+
+exports.TypeAheadPopup = TypeAheadPopup;
+TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/cjs/plugins/type-ahead/ui/WrapperTypeAhead.js

@@ -0,0 +1,151 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WrapperTypeAhead = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+
+var _utils = require("../utils");
+
+var _updateQuery = require("../commands/update-query");
+
+var _InputQuery = require("./InputQuery");
+
+var _useLoadItems = require("./hooks/use-load-items");
+
+var _useItemInsert3 = require("./hooks/use-item-insert");
+
+var _useOnForceSelect = require("./hooks/use-on-force-select");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var WrapperTypeAhead = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var triggerHandler = _ref.triggerHandler,
+      editorView = _ref.editorView,
+      anchorElement = _ref.anchorElement,
+      shouldFocusCursorInsideQuery = _ref.shouldFocusCursorInsideQuery,
+      popupsMountPoint = _ref.popupsMountPoint,
+      popupsBoundariesElement = _ref.popupsBoundariesElement,
+      popupsScrollableElement = _ref.popupsScrollableElement,
+      createAnalyticsEvent = _ref.createAnalyticsEvent,
+      inputMethod = _ref.inputMethod,
+      getDecorationPosition = _ref.getDecorationPosition,
+      reopenQuery = _ref.reopenQuery,
+      onUndoRedo = _ref.onUndoRedo;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      closed = _useState2[0],
+      setClosed = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(reopenQuery || ''),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      query = _useState4[0],
+      setQuery = _useState4[1];
+
+  var queryRef = (0, _react.useRef)(query);
+  var editorViewRef = (0, _react.useRef)(editorView);
+  var items = (0, _useLoadItems.useLoadItems)(triggerHandler, editorView, query);
+  (0, _react.useLayoutEffect)(function () {
+    queryRef.current = query;
+  }, [query]);
+
+  var _useItemInsert = (0, _useItemInsert3.useItemInsert)(triggerHandler, editorView, items),
+      _useItemInsert2 = (0, _slicedToArray2.default)(_useItemInsert, 2),
+      onItemInsert = _useItemInsert2[0],
+      onTextInsert = _useItemInsert2[1];
+
+  var selectNextItem = (0, _react.useMemo)(function () {
+    return (0, _utils.moveSelectedIndex)({
+      editorView: editorView,
+      direction: 'next'
+    });
+  }, [editorView]);
+  var selectPreviousItem = (0, _react.useMemo)(function () {
+    return (0, _utils.moveSelectedIndex)({
+      editorView: editorView,
+      direction: 'previous'
+    });
+  }, [editorView]);
+  var cancel = (0, _react.useCallback)(function (_ref2) {
+    var setSelectionAt = _ref2.setSelectionAt,
+        addPrefixTrigger = _ref2.addPrefixTrigger,
+        text = _ref2.text,
+        forceFocusOnEditor = _ref2.forceFocusOnEditor;
+    setClosed(true);
+    var fullquery = addPrefixTrigger ? "".concat(triggerHandler.trigger).concat(text) : text;
+    onTextInsert({
+      forceFocusOnEditor: forceFocusOnEditor,
+      setSelectionAt: setSelectionAt,
+      text: fullquery
+    });
+  }, [triggerHandler, onTextInsert]);
+  var insertSelectedItem = (0, _react.useCallback)(function () {
+    var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _typeAhead.SelectItemMode.SELECTED;
+    var view = editorViewRef.current;
+
+    var _getPluginState = (0, _utils.getPluginState)(view.state),
+        selectedIndex = _getPluginState.selectedIndex;
+
+    setClosed(true);
+    queueMicrotask(function () {
+      onItemInsert({
+        mode: mode,
+        index: selectedIndex,
+        query: queryRef.current
+      });
+    });
+  }, [onItemInsert]);
+  var showTypeAheadPopupList = (0, _react.useCallback)(function () {}, []);
+  var closePopup = (0, _react.useCallback)(function () {
+    setClosed(true);
+  }, []);
+  (0, _react.useEffect)(function () {
+    var view = editorViewRef.current;
+    var pluginState = (0, _utils.getPluginState)(view.state);
+
+    if (query.length === 0 || query === pluginState.query || !pluginState.triggerHandler) {
+      return;
+    }
+
+    (0, _updateQuery.updateQuery)(query)(view.state, view.dispatch);
+  }, [query, reopenQuery]);
+  (0, _useOnForceSelect.useOnForceSelect)({
+    triggerHandler: triggerHandler,
+    items: items,
+    query: query,
+    editorView: editorView,
+    closePopup: closePopup
+  });
+
+  if (closed) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_InputQuery.InputQuery, {
+    triggerQueryPrefix: triggerHandler.trigger,
+    onQueryChange: setQuery,
+    onItemSelect: insertSelectedItem,
+    selectNextItem: selectNextItem,
+    selectPreviousItem: selectPreviousItem,
+    onQueryFocus: showTypeAheadPopupList,
+    cancel: cancel,
+    forceFocus: shouldFocusCursorInsideQuery,
+    onUndoRedo: onUndoRedo,
+    reopenQuery: reopenQuery
+  });
+});
+
+exports.WrapperTypeAhead = WrapperTypeAhead;

package/dist/cjs/plugins/type-ahead/ui/hooks/use-dynamic-list-height-calculation.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDynamicListHeightCalculation = exports.calcVisibleListHeight = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+
+var calcVisibleListHeight = function calcVisibleListHeight(_ref) {
+  var startIndex = _ref.startIndex,
+      indexHeightMap = _ref.indexHeightMap,
+      limit = _ref.limit,
+      listMaxHeight = _ref.listMaxHeight,
+      listItemEstimatedHeight = _ref.listItemEstimatedHeight;
+  var hasSpace = true;
+  var totalHeight = 0;
+  var i = startIndex;
+
+  while (hasSpace && i < limit) {
+    var nextHeight = indexHeightMap[i] || listItemEstimatedHeight;
+
+    if (totalHeight < listMaxHeight) {
+      totalHeight += nextHeight;
+    }
+
+    i++;
+    hasSpace = totalHeight <= listMaxHeight;
+  }
+
+  return totalHeight;
+};
+
+exports.calcVisibleListHeight = calcVisibleListHeight;
+
+var useDynamicListHeightCalculation = function useDynamicListHeightCalculation(_ref2) {
+  var redrawListAtIndex = _ref2.redrawListAtIndex,
+      getFirstVisibleIndex = _ref2.getFirstVisibleIndex,
+      listLength = _ref2.listLength,
+      listMaxHeight = _ref2.listMaxHeight,
+      listItemEstimatedHeight = _ref2.listItemEstimatedHeight;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      renderedListHeight = _useState2[0],
+      setRenderedListHeight = _useState2[1];
+
+  var indexHeightMap = (0, _react.useRef)([]);
+  var resetScreenThrottled = (0, _react.useMemo)(function () {
+    return (0, _throttle.default)(function () {
+      requestAnimationFrame(function () {
+        var startIndex = getFirstVisibleIndex();
+        var lastItemRenderer = indexHeightMap.current[startIndex];
+
+        if (!lastItemRenderer) {
+          return;
+        } // This is an expensive method
+        // So, we are calling it only
+        // for the last top one visible
+
+
+        redrawListAtIndex(startIndex);
+        var nextListHeight = calcVisibleListHeight({
+          startIndex: startIndex,
+          limit: listLength,
+          indexHeightMap: indexHeightMap.current,
+          listMaxHeight: listMaxHeight,
+          listItemEstimatedHeight: listItemEstimatedHeight
+        });
+
+        if (nextListHeight) {
+          setRenderedListHeight(nextListHeight);
+        }
+      });
+    }, 16 // wait for one frame
+    );
+  }, [redrawListAtIndex, listLength, listMaxHeight, listItemEstimatedHeight, getFirstVisibleIndex]);
+  var setListItemHeight = (0, _react.useCallback)(function (_ref3) {
+    var index = _ref3.index,
+        height = _ref3.height;
+
+    if (typeof height !== 'number') {
+      return;
+    }
+
+    indexHeightMap.current[index] = height;
+    resetScreenThrottled();
+  }, [resetScreenThrottled]);
+  var getListItemHeight = (0, _react.useCallback)(function (index) {
+    var result = indexHeightMap.current[index];
+
+    if (result && typeof result === 'number') {
+      return result;
+    }
+
+    return listItemEstimatedHeight;
+  }, [listItemEstimatedHeight]);
+  (0, _react.useLayoutEffect)(function () {
+    indexHeightMap.current = [];
+    return function () {
+      indexHeightMap.current = [];
+    };
+  }, [listLength]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return {
+    getListItemHeight: getListItemHeight,
+    setListItemHeight: setListItemHeight,
+    renderedListHeight: renderedListHeight
+  };
+};
+
+exports.useDynamicListHeightCalculation = useDynamicListHeightCalculation;

package/dist/cjs/plugins/type-ahead/ui/hooks/use-item-insert.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useItemInsert = void 0;
+
+var _react = require("react");
+
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+
+var _closeTypeAhead = require("../../transforms/close-type-ahead");
+
+var _setSelectionBeforeQuery = require("../../transforms/set-selection-before-query");
+
+var _insertTypeAheadItem = require("../../commands/insert-type-ahead-item");
+
+var _constants = require("../../constants");
+
+var insertRawQuery = function insertRawQuery(_ref) {
+  var view = _ref.view,
+      setSelectionAt = _ref.setSelectionAt,
+      text = _ref.text,
+      forceFocusOnEditor = _ref.forceFocusOnEditor;
+  var _view$state = view.state,
+      tr = _view$state.tr,
+      schema = _view$state.schema;
+  (0, _closeTypeAhead.closeTypeAhead)(tr);
+
+  if (text.length > 0) {
+    tr.replaceSelectionWith(schema.text(text));
+
+    if (setSelectionAt === _constants.CloseSelectionOptions.BEFORE_TEXT_INSERTED) {
+      (0, _setSelectionBeforeQuery.setSelectionBeforeQuery)(text)(tr);
+    }
+  }
+
+  view.dispatch(tr);
+
+  if (forceFocusOnEditor) {
+    view.focus();
+  }
+};
+
+var useItemInsert = function useItemInsert(triggerHandler, editorView, items) {
+  var editorViewRef = (0, _react.useRef)(editorView);
+  var itemsRef = (0, _react.useRef)(items);
+  var onTextInsert = (0, _react.useCallback)(function (_ref2) {
+    var setSelectionAt = _ref2.setSelectionAt,
+        text = _ref2.text,
+        forceFocusOnEditor = _ref2.forceFocusOnEditor;
+
+    if (!triggerHandler) {
+      return;
+    }
+
+    var view = editorViewRef.current;
+    insertRawQuery({
+      view: view,
+      setSelectionAt: setSelectionAt,
+      text: text,
+      forceFocusOnEditor: forceFocusOnEditor
+    });
+  }, [triggerHandler]);
+  var onItemInsert = (0, _react.useCallback)(function (_ref3) {
+    var mode = _ref3.mode,
+        index = _ref3.index,
+        query = _ref3.query;
+    var sourceListItem = itemsRef.current;
+
+    if (sourceListItem.length === 0 || !triggerHandler) {
+      var text = "".concat(triggerHandler.trigger).concat(query);
+      onTextInsert({
+        forceFocusOnEditor: true,
+        setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED,
+        text: text
+      });
+      return;
+    }
+
+    var itemToInsert = sourceListItem[index];
+
+    if (!itemToInsert) {
+      return;
+    }
+
+    var view = editorViewRef.current;
+    (0, _insertTypeAheadItem.insertTypeAheadItem)(view)({
+      item: itemToInsert,
+      handler: triggerHandler,
+      mode: mode,
+      query: query,
+      sourceListItem: sourceListItem
+    });
+  }, [triggerHandler, onTextInsert]);
+  var onItemMatch = (0, _react.useCallback)(function (_ref4) {
+    var mode = _ref4.mode,
+        query = _ref4.query;
+    var _items = itemsRef.current;
+
+    if (_items && _items.length > 1) {
+      return false;
+    }
+
+    if (_items.length === 1) {
+      queueMicrotask(function () {
+        onItemInsert({
+          mode: mode,
+          query: query,
+          index: 0
+        });
+      });
+    } else {
+      var text = "".concat(triggerHandler.trigger).concat(query);
+      queueMicrotask(function () {
+        onTextInsert({
+          forceFocusOnEditor: true,
+          setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED,
+          text: mode === _typeAhead.SelectItemMode.SPACE ? text.concat(' ') : text
+        });
+      });
+    }
+
+    return true;
+  }, [onItemInsert, triggerHandler, onTextInsert]);
+  (0, _react.useLayoutEffect)(function () {
+    itemsRef.current = items;
+  }, [items]);
+  return [onItemInsert, onTextInsert, onItemMatch];
+};
+
+exports.useItemInsert = useItemInsert;

package/dist/cjs/plugins/type-ahead/ui/hooks/use-load-items.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLoadItems = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _updateListItems = require("../../commands/update-list-items");
+
+var EMPTY_LIST_ITEM = [];
+
+var useLoadItems = function useLoadItems(triggerHandler, editorView, query) {
+  var _useState = (0, _react.useState)(EMPTY_LIST_ITEM),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      items = _useState2[0],
+      setItems = _useState2[1];
+
+  var componentIsMounted = (0, _react.useRef)(true);
+  var editorViewRef = (0, _react.useRef)(editorView);
+  (0, _react.useEffect)(function () {
+    var getItems = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.getItems;
+
+    if (!getItems) {
+      setItems(EMPTY_LIST_ITEM);
+      return;
+    }
+
+    var options = {
+      query: query || '',
+      editorState: editorView.state
+    };
+    var view = editorViewRef.current;
+    getItems(options).then(function (result) {
+      var list = result.length > 0 ? result : EMPTY_LIST_ITEM;
+
+      if (componentIsMounted.current) {
+        setItems(list);
+      }
+
+      queueMicrotask(function () {
+        (0, _updateListItems.updateListItem)(list)(view.state, view.dispatch);
+      });
+    }); // 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]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      componentIsMounted.current = false;
+    };
+  }, []);
+  return items;
+};
+
+exports.useLoadItems = useLoadItems;

package/dist/cjs/plugins/type-ahead/ui/hooks/use-on-force-select.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnForceSelect = void 0;
+
+var _react = require("react");
+
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+
+var _insertTypeAheadItem = require("../../commands/insert-type-ahead-item");
+
+var useOnForceSelect = function useOnForceSelect(_ref) {
+  var triggerHandler = _ref.triggerHandler,
+      items = _ref.items,
+      query = _ref.query,
+      editorView = _ref.editorView,
+      closePopup = _ref.closePopup;
+  var editorViewRef = (0, _react.useRef)(editorView);
+  (0, _react.useLayoutEffect)(function () {
+    if (!query || typeof triggerHandler.forceSelect !== 'function') {
+      return;
+    }
+
+    var item = triggerHandler.forceSelect({
+      items: items,
+      query: query,
+      editorState: editorViewRef.current.state
+    });
+
+    if (!item) {
+      return;
+    }
+
+    var view = editorViewRef.current;
+    closePopup();
+    queueMicrotask(function () {
+      (0, _insertTypeAheadItem.insertTypeAheadItem)(view)({
+        item: item,
+        mode: _typeAhead.SelectItemMode.SPACE,
+        query: query,
+        handler: triggerHandler,
+        sourceListItem: items
+      });
+    });
+  }, [triggerHandler, closePopup, query, items]);
+};
+
+exports.useOnForceSelect = useOnForceSelect;