@atlaskit/editor-plugin-type-ahead 0.9.0 → 0.9.2

package/.eslintrc.js

@@ -1,5 +1,18 @@
 module.exports = {
   rules: {
     '@typescript-eslint/no-duplicate-imports': 'error',
+    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/ban-types': [
+      'error',
+      {
+        types: {
+          'React.FC':
+            'Please use types directly on props instead, and explicitly define children if required',
+          'React.FunctionalComponent':
+            'Please use types directly on props instead, and explicitly define children if required',
+        },
+        extendDefaults: false,
+      },
+    ],
   },
 };

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 0.9.2
+
+### Patch Changes
+
+- [#67189](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67189) [`93cbf53ca0e0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/93cbf53ca0e0) - Removing instances of WithPluginState from mentions and type-ahead plugins.
+
+## 0.9.1
+
+### Patch Changes
+
+- [#65031](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65031) [`a00094111b5a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a00094111b5a) - ED-21609 Update adf-schema to 35.3.0
+- Updated dependencies
+
 ## 0.9.0
 
 ### Minor Changes

package/dist/cjs/plugin.js

@@ -5,15 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.typeAheadPlugin = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
-var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
+var _view2 = require("@atlaskit/editor-prosemirror/view");
 var _insertTypeAheadItem = require("./commands/insert-type-ahead-item");
-var _updateSelectedIndex = require("./commands/update-selected-index");
 var _inputRules = require("./pm-plugins/input-rules");
 var _insertItemPlugin = require("./pm-plugins/insert-item-plugin");
 var _key = require("./pm-plugins/key");
@@ -21,8 +19,7 @@ var _main = require("./pm-plugins/main");
 var _statsModifier = require("./stats-modifier");
 var _closeTypeAhead = require("./transforms/close-type-ahead");
 var _openTypeaheadAtCursor = require("./transforms/open-typeahead-at-cursor");
-var _useItemInsert3 = require("./ui/hooks/use-item-insert");
-var _TypeAheadPopup = require("./ui/TypeAheadPopup");
+var _ContentComponent = require("./ui/ContentComponent");
 var _utils = require("./utils");
 /**
  *
@@ -33,88 +30,6 @@ var _utils = require("./utils");
  *
  */
 
-var TypeAheadMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
-  var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
-  var editorView = _ref.editorView,
-    popupMountRef = _ref.popupMountRef,
-    typeAheadState = _ref.typeAheadState,
-    fireAnalyticsCallback = _ref.fireAnalyticsCallback;
-  var isOpen = typeAheadState.decorationSet.find().length > 0;
-  var triggerHandler = typeAheadState.triggerHandler,
-    items = typeAheadState.items,
-    selectedIndex = typeAheadState.selectedIndex,
-    decorationElement = typeAheadState.decorationElement,
-    decorationSet = typeAheadState.decorationSet,
-    query = typeAheadState.query;
-  var _useItemInsert = (0, _useItemInsert3.useItemInsert)(triggerHandler, editorView, items),
-    _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)(editorView.state, editorView.dispatch);
-    });
-  }, [editorView]);
-  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]);
-  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || items.length === 0) {
-    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,
-    fireAnalyticsCallback: fireAnalyticsCallback,
-    items: items,
-    selectedIndex: selectedIndex,
-    setSelectedItem: setSelectedItem,
-    onItemInsert: insertItem,
-    decorationSet: decorationSet,
-    isEmptyQuery: !query,
-    cancel: cancel
-  });
-});
 var createOpenAtTransaction = function createOpenAtTransaction(editorAnalyticsAPI) {
   return function (props) {
     return function (tr) {
@@ -221,10 +136,10 @@ var createCloseTypeAhead = function createCloseTypeAhead(editorViewRef) {
  *
  *
  */
-var typeAheadPlugin = exports.typeAheadPlugin = function typeAheadPlugin(_ref4) {
+var typeAheadPlugin = exports.typeAheadPlugin = function typeAheadPlugin(_ref) {
   var _api$analytics, _api$analytics2;
-  var options = _ref4.config,
-    api = _ref4.api;
+  var options = _ref.config,
+    api = _ref.api;
   var fireAnalyticsCallback = (0, _analytics.fireAnalyticsEvent)(options === null || options === void 0 ? void 0 : options.createAnalyticsEvent);
   var popupMountRef = {
     current: null
@@ -246,9 +161,9 @@ var typeAheadPlugin = exports.typeAheadPlugin = function typeAheadPlugin(_ref4)
       var typeAhead = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       return [{
         name: 'typeAhead',
-        plugin: function plugin(_ref5) {
-          var dispatch = _ref5.dispatch,
-            getIntl = _ref5.getIntl;
+        plugin: function plugin(_ref2) {
+          var dispatch = _ref2.dispatch,
+            getIntl = _ref2.getIntl;
           return (0, _main.createPlugin)({
             getIntl: getIntl,
             popupMountRef: popupMountRef,
@@ -276,28 +191,40 @@ var typeAheadPlugin = exports.typeAheadPlugin = function typeAheadPlugin(_ref4)
         plugin: _insertItemPlugin.createPlugin
       }, {
         name: 'typeAheadInputRule',
-        plugin: function plugin(_ref6) {
-          var schema = _ref6.schema,
-            featureFlags = _ref6.featureFlags;
+        plugin: function plugin(_ref3) {
+          var schema = _ref3.schema,
+            featureFlags = _ref3.featureFlags;
           return (0, _inputRules.inputRulePlugin)(schema, typeAhead, featureFlags);
         }
       }];
     },
     getSharedState: function getSharedState(editorState) {
+      var _state$decorationSet, _state$decorationElem, _state$items, _state$selectedIndex;
       if (!editorState) {
         return {
           query: '',
           isOpen: false,
           isAllowed: false,
-          currentHandler: undefined
+          currentHandler: undefined,
+          decorationSet: _view2.DecorationSet.empty,
+          decorationElement: null,
+          triggerHandler: undefined,
+          items: [],
+          selectedIndex: 0
         };
       }
       var isOpen = (0, _utils.isTypeAheadOpen)(editorState);
+      var state = (0, _utils.getPluginState)(editorState);
       return {
         query: (0, _utils.getTypeAheadQuery)(editorState) || '',
         currentHandler: (0, _utils.getTypeAheadHandler)(editorState),
         isOpen: isOpen,
-        isAllowed: !isOpen
+        isAllowed: !isOpen,
+        decorationSet: (_state$decorationSet = state === null || state === void 0 ? void 0 : state.decorationSet) !== null && _state$decorationSet !== void 0 ? _state$decorationSet : _view2.DecorationSet.empty,
+        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 : [],
+        selectedIndex: (_state$selectedIndex = state === null || state === void 0 ? void 0 : state.selectedIndex) !== null && _state$selectedIndex !== void 0 ? _state$selectedIndex : 0
       };
     },
     actions: {
@@ -309,40 +236,29 @@ var typeAheadPlugin = exports.typeAheadPlugin = function typeAheadPlugin(_ref4)
       insert: createInsertTypeAheadItem(editorViewRef),
       close: createCloseTypeAhead(editorViewRef)
     },
-    contentComponent: function contentComponent(_ref7) {
-      var editorView = _ref7.editorView,
-        containerElement = _ref7.containerElement,
-        popupsMountPoint = _ref7.popupsMountPoint,
-        popupsBoundariesElement = _ref7.popupsBoundariesElement,
-        popupsScrollableElement = _ref7.popupsScrollableElement,
-        wrapperElement = _ref7.wrapperElement;
+    contentComponent: function contentComponent(_ref4) {
+      var editorView = _ref4.editorView,
+        containerElement = _ref4.containerElement,
+        popupsMountPoint = _ref4.popupsMountPoint,
+        popupsBoundariesElement = _ref4.popupsBoundariesElement,
+        popupsScrollableElement = _ref4.popupsScrollableElement,
+        wrapperElement = _ref4.wrapperElement;
       popupMountRef.current = {
         popupsMountPoint: popupsMountPoint || wrapperElement || undefined,
         popupsBoundariesElement: popupsBoundariesElement,
         popupsScrollableElement: popupsScrollableElement || containerElement || undefined
       };
-      return /*#__PURE__*/_react.default.createElement(_withPluginState.WithPluginState, {
-        plugins: {
-          typeAheadState: _key.pluginKey
-        },
-        render: function render(_ref8) {
-          var typeAheadState = _ref8.typeAheadState;
-          if (!typeAheadState) {
-            return null;
-          }
-          return /*#__PURE__*/_react.default.createElement(TypeAheadMenu, {
-            editorView: editorView,
-            popupMountRef: popupMountRef,
-            typeAheadState: typeAheadState,
-            fireAnalyticsCallback: fireAnalyticsCallback
-          });
-        }
+      return /*#__PURE__*/_react.default.createElement(_ContentComponent.ContentComponent, {
+        editorView: editorView,
+        popupMountRef: popupMountRef,
+        api: api,
+        fireAnalyticsCallback: fireAnalyticsCallback
       });
     },
-    onEditorViewStateUpdated: function onEditorViewStateUpdated(_ref9) {
-      var originalTransaction = _ref9.originalTransaction,
-        oldEditorState = _ref9.oldEditorState,
-        newEditorState = _ref9.newEditorState;
+    onEditorViewStateUpdated: function onEditorViewStateUpdated(_ref5) {
+      var originalTransaction = _ref5.originalTransaction,
+        oldEditorState = _ref5.oldEditorState,
+        newEditorState = _ref5.newEditorState;
       var oldPluginState = (0, _utils.getPluginState)(oldEditorState);
       var newPluginState = (0, _utils.getPluginState)(newEditorState);
       if (!oldPluginState || !newPluginState) {

package/dist/cjs/ui/ContentComponent.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContentComponent = ContentComponent;
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _TypeAheadMenu = require("./TypeAheadMenu");
+function ContentComponent(_ref) {
+  var api = _ref.api,
+    editorView = _ref.editorView,
+    popupMountRef = _ref.popupMountRef,
+    fireAnalyticsCallback = _ref.fireAnalyticsCallback;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['typeAhead']),
+    typeAheadState = _useSharedPluginState.typeAheadState;
+  if (!typeAheadState) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_TypeAheadMenu.TypeAheadMenu, {
+    editorView: editorView,
+    popupMountRef: popupMountRef,
+    typeAheadState: typeAheadState,
+    fireAnalyticsCallback: fireAnalyticsCallback
+  });
+}

package/dist/cjs/ui/InputQuery.js

@@ -255,7 +255,9 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
       // our event listener). As this path is strictly for click or other typeahead
       // dismissals that don't involve typeahead item selection, we carve out an
       // exception for Chrome-specific events where an input device was not the initiator.
-      if (_utils.browser.chrome && !(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range') && !('sourceCapabilities' in event && event.sourceCapabilities)) {
+      if (_utils.browser.chrome && !(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range') &&
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      !('sourceCapabilities' in event && event.sourceCapabilities)) {
         return;
       }
       cancel({
@@ -304,7 +306,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
         }
       }
     };
-    var onInput = null;
+    var onInput = function onInput() {};
     if (_utils.browser.safari) {
       // On Safari, for reasons beyond my understanding,
       // The undo behavior is totally different from other browsers
@@ -312,7 +314,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
       var _onInput = function _onInput(e) {
         var _target$textContent2;
         var target = e.target;
-        if (e.isComposing || !(target instanceof HTMLElement)) {
+        if (!(e instanceof InputEvent) || e.isComposing || !(target instanceof HTMLElement)) {
           return;
         }
         if (e.inputType === 'historyUndo' && ((_target$textContent2 = target.textContent) === null || _target$textContent2 === void 0 ? void 0 : _target$textContent2.length) === 1) {

package/dist/cjs/ui/TypeAheadMenu.js

@@ -0,0 +1,95 @@
+"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 _updateSelectedIndex = require("../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,
+    fireAnalyticsCallback = _ref.fireAnalyticsCallback;
+  var isOpen = typeAheadState.decorationSet.find().length > 0;
+  var triggerHandler = typeAheadState.triggerHandler,
+    items = typeAheadState.items,
+    selectedIndex = typeAheadState.selectedIndex,
+    decorationElement = typeAheadState.decorationElement,
+    decorationSet = typeAheadState.decorationSet,
+    query = typeAheadState.query;
+  var _useItemInsert = (0, _useItemInsert3.useItemInsert)(triggerHandler, editorView, items),
+    _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)(editorView.state, editorView.dispatch);
+    });
+  }, [editorView]);
+  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]);
+  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || items.length === 0) {
+    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,
+    fireAnalyticsCallback: fireAnalyticsCallback,
+    items: items,
+    selectedIndex: selectedIndex,
+    setSelectedItem: setSelectedItem,
+    onItemInsert: insertItem,
+    decorationSet: decorationSet,
+    isEmptyQuery: !query,
+    cancel: cancel
+  });
+});

package/dist/es2019/plugin.js

@@ -11,9 +11,8 @@ import { typeAheadQuery } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { insertTypeAheadItem } from './commands/insert-type-ahead-item';
-import { updateSelectedIndex } from './commands/update-selected-index';
 import { inputRulePlugin } from './pm-plugins/input-rules';
 import { createPlugin as createInsertItemPlugin } from './pm-plugins/insert-item-plugin';
 import { pluginKey as typeAheadPluginKey } from './pm-plugins/key';
@@ -21,90 +20,8 @@ import { createPlugin } from './pm-plugins/main';
 import { StatsModifier } from './stats-modifier';
 import { closeTypeAhead } from './transforms/close-type-ahead';
 import { openTypeAheadAtCursor } from './transforms/open-typeahead-at-cursor';
-import { useItemInsert } from './ui/hooks/use-item-insert';
-import { TypeAheadPopup } from './ui/TypeAheadPopup';
+import { ContentComponent } from './ui/ContentComponent';
 import { findHandler, getPluginState, getTypeAheadHandler, getTypeAheadQuery, isTypeAheadAllowed, isTypeAheadOpen } from './utils';
-const TypeAheadMenu = /*#__PURE__*/React.memo(({
-  editorView,
-  popupMountRef,
-  typeAheadState,
-  fireAnalyticsCallback
-}) => {
-  var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
-  const isOpen = typeAheadState.decorationSet.find().length > 0;
-  const {
-    triggerHandler,
-    items,
-    selectedIndex,
-    decorationElement,
-    decorationSet,
-    query
-  } = typeAheadState;
-  const [onItemInsert, onTextInsert, onItemMatch] = useItemInsert(triggerHandler, editorView, items);
-  const setSelectedItem = React.useCallback(({
-    index: nextIndex
-  }) => {
-    queueMicrotask(() => {
-      updateSelectedIndex(nextIndex)(editorView.state, editorView.dispatch);
-    });
-  }, [editorView]);
-  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]);
-  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || items.length === 0) {
-    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,
-    fireAnalyticsCallback: fireAnalyticsCallback,
-    items: items,
-    selectedIndex: selectedIndex,
-    setSelectedItem: setSelectedItem,
-    onItemInsert: insertItem,
-    decorationSet: decorationSet,
-    isEmptyQuery: !query,
-    cancel: cancel
-  });
-});
 const createOpenAtTransaction = editorAnalyticsAPI => props => tr => {
   const {
     triggerHandler,
@@ -276,20 +193,32 @@ export const typeAheadPlugin = ({
       }];
     },
     getSharedState(editorState) {
+      var _state$decorationSet, _state$decorationElem, _state$items, _state$selectedIndex;
       if (!editorState) {
         return {
           query: '',
           isOpen: false,
           isAllowed: false,
-          currentHandler: undefined
+          currentHandler: undefined,
+          decorationSet: DecorationSet.empty,
+          decorationElement: null,
+          triggerHandler: undefined,
+          items: [],
+          selectedIndex: 0
         };
       }
       const isOpen = isTypeAheadOpen(editorState);
+      const state = getPluginState(editorState);
       return {
         query: getTypeAheadQuery(editorState) || '',
         currentHandler: getTypeAheadHandler(editorState),
         isOpen,
-        isAllowed: !isOpen
+        isAllowed: !isOpen,
+        decorationSet: (_state$decorationSet = state === null || state === void 0 ? void 0 : state.decorationSet) !== null && _state$decorationSet !== void 0 ? _state$decorationSet : DecorationSet.empty,
+        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 : [],
+        selectedIndex: (_state$selectedIndex = state === null || state === void 0 ? void 0 : state.selectedIndex) !== null && _state$selectedIndex !== void 0 ? _state$selectedIndex : 0
       };
     },
     actions: {
@@ -314,23 +243,11 @@ export const typeAheadPlugin = ({
         popupsBoundariesElement,
         popupsScrollableElement: popupsScrollableElement || containerElement || undefined
       };
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        plugins: {
-          typeAheadState: typeAheadPluginKey
-        },
-        render: ({
-          typeAheadState
-        }) => {
-          if (!typeAheadState) {
-            return null;
-          }
-          return /*#__PURE__*/React.createElement(TypeAheadMenu, {
-            editorView: editorView,
-            popupMountRef: popupMountRef,
-            typeAheadState: typeAheadState,
-            fireAnalyticsCallback: fireAnalyticsCallback
-          });
-        }
+      return /*#__PURE__*/React.createElement(ContentComponent, {
+        editorView: editorView,
+        popupMountRef: popupMountRef,
+        api: api,
+        fireAnalyticsCallback: fireAnalyticsCallback
       });
     },
     onEditorViewStateUpdated({

package/dist/es2019/ui/ContentComponent.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { TypeAheadMenu } from './TypeAheadMenu';
+export function ContentComponent({
+  api,
+  editorView,
+  popupMountRef,
+  fireAnalyticsCallback
+}) {
+  const {
+    typeAheadState
+  } = useSharedPluginState(api, ['typeAhead']);
+  if (!typeAheadState) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(TypeAheadMenu, {
+    editorView: editorView,
+    popupMountRef: popupMountRef,
+    typeAheadState: typeAheadState,
+    fireAnalyticsCallback: fireAnalyticsCallback
+  });
+}

package/dist/es2019/ui/InputQuery.js

@@ -243,7 +243,9 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       // our event listener). As this path is strictly for click or other typeahead
       // dismissals that don't involve typeahead item selection, we carve out an
       // exception for Chrome-specific events where an input device was not the initiator.
-      if (browser.chrome && !(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range') && !('sourceCapabilities' in event && event.sourceCapabilities)) {
+      if (browser.chrome && !(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range') &&
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      !('sourceCapabilities' in event && event.sourceCapabilities)) {
         return;
       }
       cancel({
@@ -294,7 +296,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         }
       }
     };
-    let onInput = null;
+    let onInput = () => {};
     if (browser.safari) {
       // On Safari, for reasons beyond my understanding,
       // The undo behavior is totally different from other browsers
@@ -304,7 +306,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         const {
           target
         } = e;
-        if (e.isComposing || !(target instanceof HTMLElement)) {
+        if (!(e instanceof InputEvent) || e.isComposing || !(target instanceof HTMLElement)) {
           return;
         }
         if (e.inputType === 'historyUndo' && ((_target$textContent2 = target.textContent) === null || _target$textContent2 === void 0 ? void 0 : _target$textContent2.length) === 1) {