@atlaskit/editor-core 148.0.0 → 149.0.3

package/dist/esm/plugins/type-ahead/index.js

@@ -1,15 +1,107 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from 'react';
-import { typeAheadQuery } from '@atlaskit/adf-schema';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { createPlugin } from './pm-plugins/main';
+import { createPlugin as createInsertItemPlugin } from './pm-plugins/insert-item-plugin';
 import WithPluginState from '../../ui/WithPluginState';
+import { typeAheadQuery } from '@atlaskit/adf-schema';
+import { pluginKey as typeAheadPluginKey } from './pm-plugins/key';
 import { inputRulePlugin } from './pm-plugins/input-rules';
-import { keymapPlugin } from './pm-plugins/keymap';
-import { createInitialPluginState, createPlugin, pluginKey as typeAheadPluginKey } from './pm-plugins/main';
-import { TypeAhead } from './ui/TypeAhead';
+import { TypeAheadPopup } from './ui/TypeAheadPopup';
+import { getPluginState } from './utils';
+import { useItemInsert } from './ui/hooks/use-item-insert';
+import { updateSelectedIndex } from './commands/update-selected-index';
+import { StatsModifier } from './stats-modifier';
+import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, fireAnalyticsEvent } from '../analytics';
+var TypeAheadMenu = /*#__PURE__*/React.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 = useItemInsert(triggerHandler, editorView, items),
+      _useItemInsert2 = _slicedToArray(_useItemInsert, 3),
+      onItemInsert = _useItemInsert2[0],
+      onItemMatch = _useItemInsert2[2];
+
+  var setSelectedItem = React.useCallback(function (_ref2) {
+    var nextIndex = _ref2.index;
+    queueMicrotask(function () {
+      updateSelectedIndex(nextIndex)(editorView.state, editorView.dispatch);
+    });
+  }, [editorView]);
+  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]);
+  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]);
+
+  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
+  });
+});
 
 var typeAheadPlugin = function typeAheadPlugin(options) {
+  var fireAnalyticsCallback = fireAnalyticsEvent(options === null || options === void 0 ? void 0 : options.createAnalyticsEvent);
+  var popupMountRef = {
+    current: null
+  };
   return {
     name: 'typeAhead',
     marks: function marks() {
+      // We need to keep this to make sure
+      // All documents with typeahead marks will be loaded normaly
       return [{
         name: 'typeAheadQuery',
         mark: typeAheadQuery
@@ -19,74 +111,102 @@ var typeAheadPlugin = function typeAheadPlugin(options) {
       var typeAhead = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       return [{
         name: 'typeAhead',
-        plugin: function plugin(_ref) {
-          var dispatch = _ref.dispatch,
-              reactContext = _ref.reactContext;
-          return createPlugin(dispatch, reactContext, typeAhead);
+        plugin: function plugin(_ref3) {
+          var dispatch = _ref3.dispatch,
+              reactContext = _ref3.reactContext;
+          return createPlugin({
+            reactContext: reactContext,
+            popupMountRef: popupMountRef,
+            reactDispatch: dispatch,
+            typeAheadHandlers: typeAhead,
+            createAnalyticsEvent: options === null || options === void 0 ? void 0 : options.createAnalyticsEvent
+          });
         }
+      }, {
+        name: 'typeAheadInsertItem',
+        plugin: createInsertItemPlugin
       }, {
         name: 'typeAheadInputRule',
-        plugin: function plugin(_ref2) {
-          var schema = _ref2.schema,
-              featureFlags = _ref2.featureFlags;
+        plugin: function plugin(_ref4) {
+          var schema = _ref4.schema,
+              featureFlags = _ref4.featureFlags;
           return inputRulePlugin(schema, typeAhead, featureFlags);
         }
-      }, {
-        name: 'typeAheadKeymap',
-        plugin: function plugin() {
-          return keymapPlugin();
-        }
       }];
     },
-    contentComponent: function contentComponent(_ref3) {
-      var editorView = _ref3.editorView,
-          popupsMountPoint = _ref3.popupsMountPoint,
-          popupsBoundariesElement = _ref3.popupsBoundariesElement,
-          popupsScrollableElement = _ref3.popupsScrollableElement;
+    contentComponent: function contentComponent(_ref5) {
+      var editorView = _ref5.editorView,
+          containerElement = _ref5.containerElement,
+          popupsMountPoint = _ref5.popupsMountPoint,
+          popupsBoundariesElement = _ref5.popupsBoundariesElement,
+          popupsScrollableElement = _ref5.popupsScrollableElement;
+      popupMountRef.current = {
+        popupsMountPoint: popupsMountPoint || containerElement || undefined,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement
+      };
       return /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
-          typeAhead: typeAheadPluginKey
+          typeAheadState: typeAheadPluginKey
         },
-        render: function render(_ref4) {
-          var _ref4$typeAhead = _ref4.typeAhead,
-              typeAhead = _ref4$typeAhead === void 0 ? createInitialPluginState() : _ref4$typeAhead;
+        render: function render(_ref6) {
+          var typeAheadState = _ref6.typeAheadState;
 
-          if (typeAhead.typeAheadHandler && typeAhead.typeAheadHandler.headless) {
+          if (!typeAheadState) {
             return null;
           }
 
-          var queryMarkPos = typeAhead.queryMarkPos;
-          var domRef = null;
-
-          if (queryMarkPos !== null) {
-            // temporary fix to avoid page crash until it is fixed properly
-            try {
-              domRef = editorView.domAtPos(queryMarkPos);
-            } catch (ex) {
-              return null;
-            }
-          }
-
-          var anchorElement = domRef ? domRef.node.childNodes[domRef.offset] : undefined;
-          return /*#__PURE__*/React.createElement(TypeAhead, {
+          return /*#__PURE__*/React.createElement(TypeAheadMenu, {
             editorView: editorView,
-            popupsMountPoint: popupsMountPoint,
-            popupsBoundariesElement: popupsBoundariesElement,
-            popupsScrollableElement: popupsScrollableElement,
-            anchorElement: anchorElement,
-            active: typeAhead.active,
-            isLoading: !!typeAhead.itemsLoader,
-            items: typeAhead.items,
-            currentIndex: typeAhead.currentIndex,
-            highlight: typeAhead.highlight,
-            createAnalyticsEvent: options === null || options === void 0 ? void 0 : options.createAnalyticsEvent,
-            query: typeAhead.query
+            popupMountRef: popupMountRef,
+            typeAheadState: typeAheadState,
+            fireAnalyticsCallback: fireAnalyticsCallback
           });
         }
       });
+    },
+    onEditorViewStateUpdated: function onEditorViewStateUpdated(_ref7) {
+      var oldEditorState = _ref7.oldEditorState,
+          newEditorState = _ref7.newEditorState;
+      var oldPluginState = getPluginState(oldEditorState);
+      var newPluginState = getPluginState(newEditorState);
+
+      if (!oldPluginState || !newPluginState) {
+        return;
+      }
+
+      var oldTriggerHandler = oldPluginState.triggerHandler;
+      var newTriggerHandler = newPluginState.triggerHandler;
+      var isANewHandler = oldTriggerHandler !== newTriggerHandler;
+
+      if (oldTriggerHandler !== null && oldTriggerHandler !== void 0 && oldTriggerHandler.dismiss && isANewHandler) {
+        oldTriggerHandler.dismiss({
+          editorState: newEditorState,
+          query: oldPluginState.query,
+          stats: (oldPluginState.stats || new StatsModifier()).serialize()
+        });
+      }
+
+      if (newTriggerHandler !== null && newTriggerHandler !== void 0 && newTriggerHandler.onOpen && isANewHandler) {
+        newTriggerHandler.onOpen(newEditorState);
+      }
+
+      if (newTriggerHandler && isANewHandler && options !== null && options !== void 0 && options.createAnalyticsEvent) {
+        fireAnalyticsCallback({
+          payload: {
+            action: ACTION.INVOKED,
+            actionSubject: ACTION_SUBJECT.TYPEAHEAD,
+            actionSubjectId: newTriggerHandler.id || 'not_set',
+            attributes: {
+              inputMethod: newPluginState.inputMethod || INPUT_METHOD.KEYBOARD
+            },
+            eventType: EVENT_TYPE.UI
+          }
+        });
+      }
     }
   };
 };
 
-export { typeAheadPluginKey };
-export default typeAheadPlugin;
+export default typeAheadPlugin;
+export { typeAheadPluginKey };

package/dist/esm/plugins/type-ahead/insert-utils.js

@@ -0,0 +1,116 @@
+import { TextSelection, NodeSelection } from 'prosemirror-state';
+import { Node as PMNode, Slice, Fragment } from 'prosemirror-model';
+import { normaliseNestedLayout } from '../../utils/selection';
+import { safeInsert } from '../../utils/insert';
+
+function findInsertPoint(doc, pos, nodeToInsert) {
+  var $pos = doc.resolve(pos);
+
+  var createInsertPosition = function createInsertPosition(from, to) {
+    return {
+      from: from,
+      to: to || from
+    };
+  }; // Search for a valid position for nodeToInsert in progressively higher levels
+
+
+  for (var level = $pos.depth; level >= 0; level--) {
+    var nodeAtLevel = $pos.node(level); // Try to replace the empty paragraph in the level above
+    // Scenario:
+    //   doc(
+    //     table(
+    //       row(
+    //         cell(
+    //           p('{<>}'),
+    //         ),
+    //       )
+    //     )
+    //   )
+
+    var levelAbove = Math.max(level - 1, 0);
+    var parentNode = $pos.node(levelAbove); // Special case: when this is true, the 'to' position should be the end
+    // of the empty paragraph
+
+    var isNodeAtLevelEmptyParagraph = nodeAtLevel.type.name === 'paragraph' && nodeAtLevel.content.size === 0;
+    var indexAtLevelAbove = $pos.index(levelAbove);
+    var canReplaceNodeAtLevelAbove = parentNode.canReplaceWith(indexAtLevelAbove, indexAtLevelAbove, nodeToInsert.type);
+
+    if (isNodeAtLevelEmptyParagraph && canReplaceNodeAtLevelAbove) {
+      var from = $pos.posAtIndex(indexAtLevelAbove, levelAbove);
+      return createInsertPosition(from, from + nodeAtLevel.nodeSize);
+    } // Try to insert this node right after the node in the level above
+    // Scenario:
+    //   doc(
+    //     panel(
+    //       p('{<>}'),
+    //     )
+    //   )
+
+
+    var indexAfterAtLevelAbove = $pos.indexAfter(levelAbove);
+    var canInsertNodeAtLevelAbove = parentNode.canReplaceWith(indexAfterAtLevelAbove, indexAfterAtLevelAbove, nodeToInsert.type);
+
+    if (canInsertNodeAtLevelAbove) {
+      return createInsertPosition($pos.posAtIndex(indexAfterAtLevelAbove, levelAbove));
+    }
+  }
+
+  return createInsertPosition(0);
+}
+
+export var insertBlockNode = function insertBlockNode(_ref) {
+  var node = _ref.node,
+      tr = _ref.tr,
+      position = _ref.position;
+  var start = position.start,
+      end = position.end;
+
+  if (node.isText) {
+    return tr.replaceWith(start, end, node);
+  }
+
+  if (node.isBlock) {
+    tr.delete(start, end);
+    var mappedStart = tr.mapping.map(start);
+    var nodeNormalized = normaliseNestedLayout(tr, node); // Handle edge cases for hr and mediaSingle
+
+    var inserted = safeInsert(nodeNormalized, mappedStart)(tr);
+
+    if (inserted) {
+      return tr;
+    }
+
+    var sliceInserted = Slice.maxOpen(Fragment.from(nodeNormalized));
+
+    var _findInsertPoint = findInsertPoint(tr.doc, mappedStart, nodeNormalized),
+        from = _findInsertPoint.from,
+        to = _findInsertPoint.to;
+
+    tr.replaceWith(from, to, node);
+    var openPosition = Math.min(from + (node.isAtom ? node.nodeSize : sliceInserted.openStart), tr.doc.content.size);
+    var FORWARD_DIRECTION = 1;
+    var nextSelection = TextSelection.findFrom(tr.doc.resolve(openPosition), FORWARD_DIRECTION, true);
+
+    if (nextSelection) {
+      return tr.setSelection(nextSelection);
+    }
+  }
+
+  return tr;
+};
+export var insertInlineNodeOrFragment = function insertInlineNodeOrFragment(_ref2) {
+  var maybeFragment = _ref2.maybeFragment,
+      tr = _ref2.tr,
+      position = _ref2.position,
+      selectInlineNode = _ref2.selectInlineNode;
+  var start = position.start,
+      end = position.end;
+  var fragment = maybeFragment instanceof PMNode ? Fragment.from(maybeFragment) : maybeFragment;
+  tr.replaceWith(start, end, fragment);
+
+  if (selectInlineNode) {
+    return tr.setSelection(NodeSelection.create(tr.doc, start));
+  }
+
+  return tr.setSelection(TextSelection.near(tr.doc.resolve(start + fragment.size)));
+};

package/dist/esm/plugins/type-ahead/pm-plugins/actions.js

@@ -1,8 +1,11 @@
-export var ACTIONS = {
-  SELECT_PREV: 'SELECT_PREV',
-  SELECT_NEXT: 'SELECT_NEXT',
-  SELECT_CURRENT: 'SELECT_CURRENT',
-  SET_CURRENT_INDEX: 'SET_CURRENT_INDEX',
-  SET_QUERY: 'SET_QUERY',
-  ITEMS_LIST_UPDATED: 'ITEMS_LIST_UPDATED'
-};
+export var ACTIONS;
+
+(function (ACTIONS) {
+  ACTIONS["OPEN_TYPEAHEAD_AT_CURSOR"] = "OPEN_TYPEAHEAD_AT_CURSOR";
+  ACTIONS["CLOSE_TYPE_AHEAD"] = "CLOSE_TYPE_AHEAD";
+  ACTIONS["CHANGE_QUERY"] = "CHANGE_QUERY";
+  ACTIONS["INSERT_ITEM"] = "INSERT_ITEM";
+  ACTIONS["INSERT_RAW_QUERY"] = "INSERT_RAW_QUERY";
+  ACTIONS["UPDATE_LIST_ITEMS"] = "UPDATE_LIST_ITEMS";
+  ACTIONS["UPDATE_SELECTED_INDEX"] = "UPDATE_SELECTED_INDEX";
+})(ACTIONS || (ACTIONS = {}));

package/dist/esm/plugins/type-ahead/pm-plugins/decorations.js

@@ -0,0 +1,204 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import uuid from 'uuid';
+import { TextSelection } from 'prosemirror-state';
+import { DecorationSet, Decoration } from 'prosemirror-view';
+import { B400 } from '@atlaskit/theme/colors';
+import { keyName as keyNameNormalized } from 'w3c-keyname';
+import { IntlProvider } from 'react-intl';
+import { redo, undo } from 'prosemirror-history';
+import { TYPE_AHEAD_DECORATION_KEY, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE } from '../constants';
+import { WrapperTypeAhead } from '../ui/WrapperTypeAhead';
+import { StatsModifier } from '../stats-modifier';
+import { getTypeAheadQuery } from '../utils';
+import { closeTypeAhead } from '../transforms/close-type-ahead';
+export var factoryDecorations = function factoryDecorations(_ref) {
+  var intl = _ref.intl,
+      popupMountRef = _ref.popupMountRef,
+      createAnalyticsEvent = _ref.createAnalyticsEvent;
+
+  var createDecorations = function createDecorations(tr, _ref2) {
+    var triggerHandler = _ref2.triggerHandler,
+        inputMethod = _ref2.inputMethod,
+        reopenQuery = _ref2.reopenQuery;
+    var selection = tr.selection;
+
+    if (!(selection instanceof TextSelection) || !selection.$cursor) {
+      return {
+        decorationSet: DecorationSet.empty,
+        stats: null,
+        decorationElement: null
+      };
+    }
+
+    var decorationId = "decoration_id_".concat(TYPE_AHEAD_DECORATION_KEY, "_").concat(uuid());
+    var $cursor = selection.$cursor;
+    var typeaheadComponent = document.createElement('mark');
+    var stats = new StatsModifier();
+    var shouldFocusCursorInsideQuery = true;
+    var deco = Decoration.widget($cursor.pos, function (editorView, getDecorationPosition) {
+      var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
+
+      typeaheadComponent.setAttribute('id', decorationId);
+      typeaheadComponent.setAttribute('role', 'search');
+      typeaheadComponent.setAttribute('aria-label', "On ".concat(triggerHandler.id));
+      typeaheadComponent.dataset.typeAheadQuery = 'true';
+      typeaheadComponent.dataset.trigger = triggerHandler.trigger; // This line below seems weird,
+      // we need that cuz the clickAreaHelper
+      // will try to hijack any click event coming
+      // from the inside of the Editor
+      // packages/editor/editor-core/src/ui/Addon/click-area-helper.ts
+
+      typeaheadComponent.dataset.editorPopup = 'true';
+      typeaheadComponent.dataset.typeAhead = TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE;
+      typeaheadComponent.style.color = B400;
+      typeaheadComponent.style.backgroundColor = 'transparent';
+
+      var onUndoRedo = function onUndoRedo(inputType) {
+        if (!['historyUndo', 'historyRedo'].includes(inputType)) {
+          return false;
+        }
+
+        var hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
+        var currentQuery = getTypeAheadQuery(editorView.state);
+
+        if (hasReopenQuery || currentQuery.length === 0) {
+          var command = inputType === 'historyUndo' ? undo : redo;
+          var _tr = editorView.state.tr;
+
+          var fakeDispatch = function fakeDispatch(customTr) {
+            _tr = customTr;
+          };
+
+          var result = command(editorView.state, fakeDispatch);
+
+          if (result) {
+            closeTypeAhead(_tr);
+            editorView.dispatch(_tr);
+            editorView.focus();
+          }
+
+          return result;
+        }
+
+        return false;
+      };
+
+      ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
+        locale: intl.locale || 'en',
+        messages: intl.messages,
+        formats: intl.formats
+      }, /*#__PURE__*/React.createElement(WrapperTypeAhead, {
+        triggerHandler: triggerHandler,
+        editorView: editorView,
+        anchorElement: typeaheadComponent,
+        createAnalyticsEvent: createAnalyticsEvent,
+        inputMethod: inputMethod,
+        getDecorationPosition: getDecorationPosition,
+        shouldFocusCursorInsideQuery: shouldFocusCursorInsideQuery,
+        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,
+        onUndoRedo: onUndoRedo,
+        reopenQuery: reopenQuery
+      })), typeaheadComponent);
+      shouldFocusCursorInsideQuery = false;
+      return typeaheadComponent;
+    }, {
+      isTypeAheadDecoration: true,
+      key: decorationId,
+      side: 0,
+      stopEvent: function stopEvent(e) {
+        var key = keyNameNormalized(e);
+        var sel = document.getSelection();
+
+        if ('ArrowLeft' === key && (sel === null || sel === void 0 ? void 0 : sel.anchorOffset) === 0) {
+          return false;
+        }
+
+        return true;
+      },
+      ignoreSelection: false
+    });
+    return {
+      decorationSet: DecorationSet.create(tr.doc, [deco]),
+      decorationElement: typeaheadComponent,
+      stats: stats
+    };
+  };
+
+  var removeDecorations = function removeDecorations(decorationSet) {
+    if (!decorationSet || decorationSet === DecorationSet.empty) {
+      return false;
+    }
+
+    var typeAheadDecorations = decorationSet.find(undefined, undefined, function (spec) {
+      return spec.isTypeAheadDecoration;
+    });
+
+    if (!typeAheadDecorations || typeAheadDecorations.length === 0) {
+      return false;
+    }
+
+    typeAheadDecorations.forEach(function (_ref3) {
+      var spec = _ref3.spec;
+
+      if (!spec.key) {
+        return;
+      }
+
+      var decoElement = document.querySelector("#".concat(spec.key));
+
+      if (!decoElement) {
+        return;
+      }
+
+      ReactDOM.unmountComponentAtNode(decoElement);
+    });
+    return true;
+  };
+
+  return {
+    createDecorations: createDecorations,
+    removeDecorations: removeDecorations
+  };
+};
+export var isSelectionInsideTypeAhead = function isSelectionInsideTypeAhead(_ref4) {
+  var decorationSet = _ref4.decorationSet,
+      selection = _ref4.selection;
+
+  if (!decorationSet || decorationSet === DecorationSet.empty) {
+    return false;
+  }
+
+  var typeAheadDecorations = decorationSet.find(undefined, undefined, function (spec) {
+    return spec.isTypeAheadDecoration;
+  });
+
+  if (!typeAheadDecorations || typeAheadDecorations.length === 0) {
+    return false;
+  }
+
+  return typeAheadDecorations.some(function (dec) {
+    return dec.from === selection.from && dec.to === selection.to;
+  });
+};
+export var findDecorationElement = function findDecorationElement(_ref5) {
+  var selection = _ref5.selection,
+      decorationSet = _ref5.decorationSet;
+
+  if (!decorationSet || decorationSet === DecorationSet.empty || !(selection instanceof TextSelection) || !selection.$cursor) {
+    return null;
+  }
+
+  var pos = selection.$cursor.pos;
+  var decoration = decorationSet.find(pos, pos, function (spec) {
+    return spec === null || spec === void 0 ? void 0 : spec.isTypeAheadDecoration;
+  });
+
+  if (!decoration || decoration.length !== 1) {
+    return null;
+  }
+
+  return document.querySelector("#".concat(decoration[0].spec.key));
+};

package/dist/esm/plugins/type-ahead/pm-plugins/input-rules.js

@@ -1,47 +1,32 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import { createRule, createPlugin } from '../../../utils/input-rules';
 import { leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
-import { pluginKey as typeAheadPluginKey } from './main'; // We cannot set a proper plugin key on input rule plugins, so instead, once
-// the plugin is created we save its key to this variable
-
-export var typeAheadInputRulesPluginKey = '';
+import { openTypeAheadAtCursor } from '../transforms/open-typeahead-at-cursor';
+import { INPUT_METHOD } from '../../analytics';
+import { createRule, createPlugin } from '../../../utils/input-rules';
 export function inputRulePlugin(schema, typeAheads, featureFlags) {
-  var triggersRegex = typeAheads.map(function (t) {
-    return t.customRegex || t.trigger;
-  }).join('|');
-
-  if (!triggersRegex.length) {
+  if (!typeAheads || typeAheads.length === 0) {
     return;
   }
 
-  var regex = new RegExp("(^|[.!?\\s".concat(leafNodeReplacementCharacter, "])(").concat(triggersRegex, ")$"));
-  var typeAheadInputRule = createRule(regex, function (state, match) {
-    var typeAheadState = typeAheadPluginKey.getState(state);
-    /**
-     * Why using match 2 and 3?  Regex:
-     * (allowed characters before trigger)(joined|triggers|(sub capture groups))
-     *            match[1]                     match[2]          match[3] – optional
-     */
-
-    var trigger = match[3] || match[2];
+  var rules = typeAheads.reduce(function (acc, typeAhead) {
+    var trigger = typeAhead.customRegex || typeAhead.trigger;
 
-    if (!typeAheadState.isAllowed || !trigger) {
-      return null;
+    if (!trigger) {
+      return acc;
     }
 
-    var mark = schema.mark('typeAheadQuery', {
-      trigger: trigger
-    });
-    var tr = state.tr,
-        selection = state.selection;
-    var marks = selection.$from.marks();
-    return tr.replaceSelectionWith(schema.text(trigger, [mark].concat(_toConsumableArray(marks))), false);
-  });
-  var plugin = createPlugin('type-ahead', [typeAheadInputRule], {
+    var regex = new RegExp("(^|[.!?\\s".concat(leafNodeReplacementCharacter, "])(").concat(trigger, ")$"));
+    acc.push(createRule(regex, function (state, match) {
+      return openTypeAheadAtCursor({
+        triggerHandler: typeAhead,
+        inputMethod: INPUT_METHOD.KEYBOARD
+      })(state.tr);
+    }));
+    return acc;
+  }, []);
+  var plugin = createPlugin('type-ahead', rules, {
     allowInsertTextOnDocument: false,
     useUnpredictableInputRule: featureFlags.useUnpredictableInputRule
   });
-  typeAheadInputRulesPluginKey = plugin.key;
   return plugin;
 }
 export default inputRulePlugin;