@atlaskit/editor-core 148.0.0 → 149.0.3

package/dist/es2019/plugins/quick-insert/assets/index.js

@@ -102,6 +102,12 @@ export const IconPanel = Loadable({
   './panel').then(module => module.default),
   loading: () => null
 });
+export const IconCustomPanel = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_editor-icon-custon-panel" */
+  './custom-panel').then(module => module.default),
+  loading: () => null
+});
 export const IconQuote = Loadable({
   loader: () => import(
   /* webpackChunkName: "@atlaskit-internal_editor-icon-quote" */

package/dist/es2019/plugins/quick-insert/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Plugin } from 'prosemirror-state';
 import memoizeOne from 'memoize-one';
-import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT_ID } from '../analytics';
-import { analyticsEventKey } from '../analytics/consts';
+import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import { pluginKey } from './plugin-key';
 import { searchQuickInsertItems } from './search';
 import ModalElementBrowser from './ui/ModalElementBrowser';
@@ -19,35 +18,24 @@ const quickInsertPlugin = options => ({
         providerFactory,
         reactContext,
         dispatch
-      }) => quickInsertPluginFactory(quickInsert, providerFactory, reactContext().intl, dispatch)
+      }) => quickInsertPluginFactory(quickInsert, providerFactory, reactContext().intl, dispatch, options === null || options === void 0 ? void 0 : options.emptyStateHandler)
     }];
   },
 
   pluginsOptions: {
     typeAhead: {
+      id: TypeAheadAvailableNodes.QUICK_INSERT,
       trigger: '/',
       headless: options ? options.headless : undefined,
-      getItems: (query, state, intl, {
-        prevActive,
-        queryChanged
-      }, _tr, dispatch) => {
-        if (!prevActive && queryChanged) {
-          dispatch(analyticsEventKey, {
-            payload: {
-              action: ACTION.INVOKED,
-              actionSubject: ACTION_SUBJECT.TYPEAHEAD,
-              actionSubjectId: ACTION_SUBJECT_ID.TYPEAHEAD_QUICK_INSERT,
-              attributes: {
-                inputMethod: INPUT_METHOD.KEYBOARD
-              },
-              eventType: EVENT_TYPE.UI
-            }
-          });
-        }
 
-        const quickInsertState = pluginKey.getState(state);
-        return searchQuickInsertItems(quickInsertState, options)(query);
+      getItems({
+        query,
+        editorState
+      }) {
+        const quickInsertState = pluginKey.getState(editorState);
+        return Promise.resolve(searchQuickInsertItems(quickInsertState, options)(query));
       },
+
       selectItem: (state, item, insert) => {
         return item.action(insert, state);
       }
@@ -120,13 +108,14 @@ const setProviderState = providerState => (state, dispatch) => {
   return true;
 };
 
-function quickInsertPluginFactory(quickInsertItems, providerFactory, intl, dispatch) {
+function quickInsertPluginFactory(quickInsertItems, providerFactory, intl, dispatch, emptyStateHandler) {
   return new Plugin({
     key: pluginKey,
     state: {
       init() {
         return {
           isElementBrowserModalOpen: false,
+          emptyStateHandler,
           // lazy so it doesn't run on editor initialization
           // memo here to avoid using a singleton cache, avoids editor
           // getting confused when two editors exist within the same page.

package/dist/es2019/plugins/quick-insert/search.js

@@ -1,6 +1,4 @@
-import Fuse from 'fuse.js'; // AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-
+import Fuse from 'fuse.js';
 import { dedupe } from '../../utils';
 const options = {
   threshold: 0.3,

package/dist/es2019/plugins/quick-insert/ui/ModalElementBrowser/index.js

@@ -30,6 +30,7 @@ const Modal = ({
     onInsertItem: onInsertItem,
     helpUrl: helpUrl,
     isOpen: quickInsertState && quickInsertState.isElementBrowserModalOpen || false,
+    emptyStateHandler: quickInsertState && quickInsertState.emptyStateHandler,
     onClose: onClose
   });
 };

package/dist/es2019/plugins/rank.js

@@ -1,5 +1,5 @@
 export default {
-  plugins: ['featureFlagsContextPlugin', 'compositionPlugin', 'inlineCursorTargetPlugin', 'focusHandlerPlugin', 'frozenEditor', 'submitEditor', 'saveOnEnter', 'customAutoformatting', 'newlinePreserveMarksPlugin', 'imageUpload', 'imageUploadInputRule', 'clipboard', 'paste', 'pasteKeymap', 'mention', 'mentionInputRule', 'mentionKeymap', 'emoji', 'placeholderText', 'emojiInputRule', 'emojiKeymap', 'emojiAsciiInputRule', 'blockType', 'quickInsert', 'tasksAndDecisions', 'blockTypeInputRule', 'tasksAndDecisionsInputRule', 'list', 'typeAhead', 'typeAheadKeymap', 'typeAheadInputRule', 'date', // Needs to be before indentation to handle tab into input field
+  plugins: ['featureFlagsContextPlugin', 'compositionPlugin', 'inlineCursorTargetPlugin', 'typeAhead', 'typeAheadInsertItem', 'focusHandlerPlugin', 'frozenEditor', 'submitEditor', 'saveOnEnter', 'customAutoformatting', 'newlinePreserveMarksPlugin', 'imageUpload', 'imageUploadInputRule', 'clipboard', 'paste', 'pasteKeymap', 'mention', 'mentionInputRule', 'mentionKeymap', 'emoji', 'placeholderText', 'emojiInputRule', 'emojiKeymap', 'emojiAsciiInputRule', 'blockType', 'quickInsert', 'tasksAndDecisions', 'blockTypeInputRule', 'tasksAndDecisionsInputRule', 'list', 'typeAhead', 'typeAheadKeymap', 'typeAheadInputRule', 'date', // Needs to be before indentation to handle tab into input field
   'dateKeymap', // This should be always after `typeAheadKeymap` & `emojiKeymap`
   'indentationKeymap', 'textColor', 'alignmentPlugin', 'listInputRule', 'listKeymap', 'codeBlock', 'codeBlockIDEKeyBindings', 'codeBlockKeyMap', 'textFormatting', 'textFormattingCursor', 'textFormattingInputRule', 'textFormattingSmartRule', 'textFormattingClear', 'textFormattingKeymap', // task/decisions keymap needs to be above table keymap so can indent actions in a table
   'tasksAndDecisionsKeyMap', // expand and table keymaps need to be above selection keymap to add their custom selection behaviour:

package/dist/es2019/plugins/rule/index.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import { Fragment } from 'prosemirror-model';
 import { rule } from '@atlaskit/adf-schema';
-import { safeInsert } from '../../utils/insert';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD } from '../analytics';
-import { getFeatureFlags } from '../feature-flags-context';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { IconDivider } from '../quick-insert/assets';
 import inputRulePlugin from './pm-plugins/input-rule';
@@ -45,25 +42,7 @@ const rulePlugin = () => ({
       icon: () => /*#__PURE__*/React.createElement(IconDivider, null),
 
       action(insert, state) {
-        let tr = null;
-        const {
-          newInsertionBehaviour
-        } = getFeatureFlags(state);
-
-        if (newInsertionBehaviour) {
-          /**
-           * This is a workaround to get rid of the typeahead text when using quick insert
-           * Once we insert *nothing*, we get a new transaction, so we can use the new selection
-           * without considering the extra text after the `/` command.
-           **/
-          tr = insert(Fragment.empty);
-          tr = safeInsert(state.schema.nodes.rule.createChecked(), tr.selection.from)(tr);
-        }
-
-        if (!tr) {
-          tr = insert(state.schema.nodes.rule.createChecked());
-        }
-
+        let tr = insert(state.schema.nodes.rule.createChecked());
         return addAnalytics(state, tr, {
           action: ACTION.INSERTED,
           actionSubject: ACTION_SUBJECT.DOCUMENT,

package/dist/es2019/plugins/scroll-into-view/index.js

@@ -1,5 +1,4 @@
 import { Plugin, PluginKey } from 'prosemirror-state';
-import { typeAheadInputRulesPluginKey } from '../type-ahead/pm-plugins/input-rules';
 import { TEXT_INPUT_RULE_TRANSACTION_KEY } from '@atlaskit/prosemirror-input-rules';
 /**
  * Plugin to scroll the user's selection into view whenever the user updates
@@ -25,8 +24,7 @@ const createPlugin = () => new Plugin({
     if ((tr.docChanged || tr.storedMarksSet) && !tr.scrolledIntoView && tr.getMeta('scrollIntoView') !== false && // ignore anything we would not want to undo
     // this covers things like autofixing layouts, hovering table rows/cols
     tr.getMeta('addToHistory') !== false && // ignore collab changes from another user
-    !tr.getMeta('isRemote') && // ignore typeahead triggers
-    !tr.getMeta(typeAheadInputRulesPluginKey) && // ignore any transaction coming from the input text rule plugin
+    !tr.getMeta('isRemote') && // ignore any transaction coming from the input text rule plugin
     !tr.getMeta(TEXT_INPUT_RULE_TRANSACTION_KEY)) {
       return newState.tr.scrollIntoView();
     }

package/dist/es2019/plugins/selection/gap-cursor/actions.js

@@ -107,8 +107,7 @@ export const arrow = (dir, endOfTextblock) => (state, dispatch, view) => {
 
 
   if (selection instanceof GapCursorSelection && // next node allow gap cursor position
-  isValidTargetNode(isBackward(dir) ? $pos.nodeBefore : $pos.nodeAfter) && ( // gap cursor changes block node
-  isBackward(dir) && selection.side === Side.LEFT || isForward(dir) && selection.side === Side.RIGHT)) {
+  isValidTargetNode(isBackward(dir) ? $pos.nodeBefore : $pos.nodeAfter) && (isBackward(dir) && selection.side === Side.LEFT || isForward(dir) && selection.side === Side.RIGHT)) {
     // reverse cursor position
     if (dispatch) {
       dispatch(tr.setSelection(new GapCursorSelection($pos, selection.side === Side.RIGHT ? Side.LEFT : Side.RIGHT)).scrollIntoView());
@@ -270,12 +269,12 @@ export const setSelectionTopLevelBlocks = (tr, event, editorRef, posAtCoords, ed
   } // try to set text selection if the editor isnt focused
   // if the editor is focused, we are most likely dragging a selection outside.
   else if (editorFocused === false) {
-      const selectionTemp = Selection.findFrom($pos, cursorCoords.side === Side.LEFT ? 1 : -1, true);
+    const selectionTemp = Selection.findFrom($pos, cursorCoords.side === Side.LEFT ? 1 : -1, true);
 
-      if (selectionTemp) {
-        tr.setSelection(selectionTemp);
-      }
+    if (selectionTemp) {
+      tr.setSelection(selectionTemp);
     }
+  }
 };
 export const setCursorForTopLevelBlocks = (event, editorRef, posAtCoords, editorFocused) => (state, dispatch) => {
   const {

package/dist/es2019/plugins/selection/pm-plugins/selection-main.js

@@ -25,9 +25,7 @@ export const createPlugin = (dispatch, dispatchAnalyticsEvent, options = {}) =>
           return;
         }
 
-        const analyticsPayload = getNodeSelectionAnalyticsPayload(state.selection) || getAllSelectionAnalyticsPayload(state.selection) || // We handle all range/cell selections except click and drag here, which is
-        // handled in mouseup handler below
-        !editorView.mouseDown && (getRangeSelectionAnalyticsPayload(state.selection, state.doc) || getCellSelectionAnalyticsPayload(state)); // We have to use dispatchAnalyticsEvent over any of the analytics plugin helpers
+        const analyticsPayload = getNodeSelectionAnalyticsPayload(state.selection) || getAllSelectionAnalyticsPayload(state.selection) || !editorView.mouseDown && (getRangeSelectionAnalyticsPayload(state.selection, state.doc) || getCellSelectionAnalyticsPayload(state)); // We have to use dispatchAnalyticsEvent over any of the analytics plugin helpers
         // as there were several issues caused by the fact that adding analytics through
         // the plugin adds a new step to the transaction
         // This causes prosemirror to run through some different code paths, eg. attempting

package/dist/es2019/plugins/status/actions.js

@@ -8,11 +8,14 @@ export const DEFAULT_STATUS = {
   text: '',
   color: 'neutral'
 };
-export const createStatus = (showStatusPickerAtOffset = -2) => (insert, state) => {
+export const createStatus = (showStatusPickerAtOffset = 0) => (insert, state) => {
   const statusNode = state.schema.nodes.status.createChecked({ ...DEFAULT_STATUS,
     localId: uuid.generate()
   });
-  const tr = insert(statusNode);
+  const space = state.schema.text(' ');
+  const tr = insert(Fragment.from([statusNode, space]), {
+    selectInlineNode: true
+  });
   const showStatusPickerAt = tr.selection.from + showStatusPickerAtOffset;
   return tr.setSelection(NodeSelection.create(tr.doc, showStatusPickerAt)).setMeta(pluginKey, {
     showStatusPickerAt,

package/dist/es2019/plugins/status/plugin.js

@@ -40,7 +40,7 @@ const createPlugin = (dispatch, portalProviderAPI, eventDispatcher, options) =>
         }
       }
 
-      if (!tr.selection.eq(oldEditorState.selection)) {
+      if (tr.selectionSet) {
         // Change in selection, while status picker was open, update state, if required.
         const selectionFrom = tr.selection.from;
         const nodeAtSelection = tr.doc.nodeAt(selectionFrom);

package/dist/es2019/plugins/table/commands/selection.js

@@ -171,24 +171,24 @@ const arrowLeftFromText = selection => (state, dispatch) => {
 
     if (isSelectionAtStartOfTable($from, selection) && $from.parent.type.name === 'paragraph' && $from.depth === table.depth + 3 // + 3 for: row, cell & paragraph nodes
     ) {
-        const {
-          selectionRelativeToNode
-        } = getSelectionPluginState(state);
-
-        if (selectionRelativeToNode === RelativeSelectionPos.Before) {
-          // we have a text selection at start of first table cell, directly inside a top level paragraph,
-          // and want to set gap cursor selection before table
-          return setGapCursorBeforeTable()(state, dispatch);
-        } else {
-          // we have a text selection at start of first table cell, directly inside a top level paragraph,
-          // and want to set a full table cell selection
-          return selectFullTable({
-            node: table.node,
-            startPos: table.start,
-            dir: TableSelectionDirection.BottomToTop
-          })(state, dispatch);
-        }
+      const {
+        selectionRelativeToNode
+      } = getSelectionPluginState(state);
+
+      if (selectionRelativeToNode === RelativeSelectionPos.Before) {
+        // we have a text selection at start of first table cell, directly inside a top level paragraph,
+        // and want to set gap cursor selection before table
+        return setGapCursorBeforeTable()(state, dispatch);
+      } else {
+        // we have a text selection at start of first table cell, directly inside a top level paragraph,
+        // and want to set a full table cell selection
+        return selectFullTable({
+          node: table.node,
+          startPos: table.start,
+          dir: TableSelectionDirection.BottomToTop
+        })(state, dispatch);
       }
+    }
   }
 
   return false;
@@ -204,14 +204,14 @@ const arrowRightFromText = selection => (state, dispatch) => {
 
     if (isSelectionAtEndOfTable($to, selection) && $to.parent.type.name === 'paragraph' && $to.depth === table.depth + 3 // + 3 for: row, cell & paragraph nodes
     ) {
-        // we have a text selection at end of last table cell, directly inside a top level paragraph,
-        // and want to set a full table cell selection
-        return selectFullTable({
-          node: table.node,
-          startPos: table.start,
-          dir: TableSelectionDirection.TopToBottom
-        })(state, dispatch);
-      }
+      // we have a text selection at end of last table cell, directly inside a top level paragraph,
+      // and want to set a full table cell selection
+      return selectFullTable({
+        node: table.node,
+        startPos: table.start,
+        dir: TableSelectionDirection.TopToBottom
+      })(state, dispatch);
+    }
   }
 
   return false;

package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -87,6 +87,7 @@ export class TableRowNodeView {
 
     _defineProperty(this, "onTablePluginState", state => {
       const tableRef = state.tableRef;
+      let focusChanged = false;
       const tree = this.tree;
 
       if (!tree) {
@@ -103,6 +104,11 @@ export class TableRowNodeView {
       }
 
       const isCurrentTableSelected = tableRef === tree.table;
+
+      if (isCurrentTableSelected !== this.focused) {
+        focusChanged = true;
+      }
+
       this.focused = isCurrentTableSelected;
       const {
         wrapper
@@ -129,7 +135,8 @@ export class TableRowNodeView {
 
 
       setTimeout(() => {
-        if (!this.stickyHeadersOptimization) {
+        // if focus changed while header is sticky - still repaint the positions will shift
+        if (!this.stickyHeadersOptimization || focusChanged && this.isSticky) {
           this.paint(tree);
         }
 

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/resize-state.js

@@ -146,8 +146,7 @@ export const bulkColumnsResize = (resizeState, columnsIndexes, sourceColumnIndex
   });
   let newState = { ...resizeState,
     cols: cols.map(col => {
-      if (columnsIndexes.indexOf(col.index) > -1 || // take from prev columns only if dragging the first handle to the left
-      columnsIndexes.indexOf(sourceColumnIndex) > -1 && col.index < colIndex) {
+      if (columnsIndexes.indexOf(col.index) > -1 || columnsIndexes.indexOf(sourceColumnIndex) > -1 && col.index < colIndex) {
         return col;
       }
 
@@ -184,19 +183,19 @@ export const bulkColumnsResize = (resizeState, columnsIndexes, sourceColumnIndex
     } // table is in overflow: keep the dragged column at its widths and evenly distribute columns
     // to recover from overflow state
     else {
-        const columnWidth = Math.floor((minTableWidth - sourceCol.width) / (newState.cols.length - 1));
-        newState = { ...resizeState,
-          cols: newState.cols.map(col => {
-            if (col.index === sourceCol.index) {
-              return col;
-            }
-
-            return { ...col,
-              width: columnWidth
-            };
-          })
-        };
-      }
+      const columnWidth = Math.floor((minTableWidth - sourceCol.width) / (newState.cols.length - 1));
+      newState = { ...resizeState,
+        cols: newState.cols.map(col => {
+          if (col.index === sourceCol.index) {
+            return col;
+          }
+
+          return { ...col,
+            width: columnWidth
+          };
+        })
+      };
+    }
   } // fix total table widths by adding missing pixels to columns widths here and there
 
 

package/dist/es2019/plugins/tasks-and-decisions/nodeviews/decisionItem.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ReactNodeView } from '../../../nodeviews';
 import DecisionItem from '../ui/Decision';
+import { isTypeAheadOpen } from '../../type-ahead/utils';
 
 class Decision extends ReactNodeView {
   isContentEmpty(node) {
@@ -26,7 +27,7 @@ class Decision extends ReactNodeView {
   render(_props, forwardRef) {
     return /*#__PURE__*/React.createElement(DecisionItem, {
       contentRef: forwardRef,
-      showPlaceholder: this.isContentEmpty(this.node)
+      showPlaceholder: this.isContentEmpty(this.node) && !isTypeAheadOpen(this.view.state)
     });
   }
 

package/dist/es2019/plugins/tasks-and-decisions/nodeviews/taskItem.js

@@ -5,6 +5,7 @@ import { ReactNodeView } from '../../../nodeviews';
 import WithPluginState from '../../../ui/WithPluginState';
 import { stateKey as taskPluginKey } from '../pm-plugins/plugin-key';
 import TaskItem from '../ui/Task';
+import { isTypeAheadOpen } from '../../type-ahead/utils';
 
 class Task extends ReactNodeView {
   constructor(...args) {
@@ -92,7 +93,7 @@ class Task extends ReactNodeView {
           contentRef: forwardRef,
           isDone: state === 'DONE',
           onChange: this.handleOnChange,
-          showPlaceholder: this.isContentEmpty(this.node),
+          showPlaceholder: this.isContentEmpty(this.node) && !isTypeAheadOpen(this.view.state),
           providers: props.providerFactory
         });
       }

package/dist/es2019/plugins/tasks-and-decisions/pm-plugins/keymaps.js

@@ -173,8 +173,7 @@ const deleteHandler = filter([isInsideTaskOrDecisionItem, isEmptySelectionAtEnd]
   } // if nested, just unindent
 
 
-  if ($next.node($next.depth - 2).type === taskList || // this is for the case when we are on a non-nested item and next one is nested
-  $next.node($next.depth - 1).type === taskList && $next.parent.type === taskList) {
+  if ($next.node($next.depth - 2).type === taskList || $next.node($next.depth - 1).type === taskList && $next.parent.type === taskList) {
     const tr = liftBlock(state.tr, $next, $next);
 
     if (dispatch && tr) {

package/dist/es2019/plugins/text-formatting/pm-plugins/cursor.js

@@ -28,10 +28,7 @@ export default new Plugin({
       const clickWasAtTextNode = !!(clickNode && clickNode.isText);
       const clickWasAtEndOfAParagraphNode = $click.parent.type === paragraph && $click.textOffset === 0 && $click.nodeAfter === null;
 
-      if (clickWasAtEdgeOfATextNode && clickWasNearACodeMark && clickedDOMElementPosition && ( // if click did not occur at a text node or end of paragraph, then
-      // it was at a directly adjacent non-text node, so we skip this manual
-      // text selection logic to preserve that non-text node's selection
-      clickWasAtTextNode || clickWasAtEndOfAParagraphNode)) {
+      if (clickWasAtEdgeOfATextNode && clickWasNearACodeMark && clickedDOMElementPosition && (clickWasAtTextNode || clickWasAtEndOfAParagraphNode)) {
         const clickWasInsideNodeDOM = event.target.parentNode === view.domAtPos(clickedDOMElementPosition).node && code.isInSet(view.state.doc.resolve(clickedDOMElementPosition).nodeAfter.marks);
         const nodeNextToClick = $click.nodeBefore && code.isInSet($click.nodeBefore.marks) ? $click.nodeAfter : $click.nodeBefore; // Need to set the selection here to allow clicking between [code('text'),{<>},emoji()]
 

package/dist/es2019/plugins/type-ahead/api.js

@@ -0,0 +1,224 @@
+import { TypeAheadAvailableNodes, SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { findHandler, isTypeAheadOpen, getTypeAheadHandler, getTypeAheadQuery } from './utils';
+import { INPUT_METHOD } from '../analytics/types/enums';
+import { openTypeAheadAtCursor } from './transforms/open-typeahead-at-cursor';
+import { closeTypeAhead } from './transforms/close-type-ahead';
+import { updateQuery } from './commands/update-query';
+import { insertTypeAheadItem } from './commands/insert-type-ahead-item';
+
+const open = ({
+  editorView
+}) => itemType => inputMethod => {
+  const {
+    state
+  } = editorView;
+  const handler = findHandler(itemType, state);
+
+  if (!handler) {
+    return false;
+  }
+
+  const {
+    tr
+  } = state;
+  openTypeAheadAtCursor({
+    triggerHandler: handler,
+    inputMethod
+  })(tr);
+  editorView.dispatch(tr);
+  return true;
+};
+
+const defaultCloseOptions = {
+  insertCurrentQueryAsRawText: false
+};
+
+const close = ({
+  editorView
+}) => (options = defaultCloseOptions) => {
+  const {
+    state
+  } = editorView;
+  const currentQuery = getTypeAheadQuery(editorView.state);
+  let tr = state.tr;
+
+  if (options.attachCommand) {
+    const fakeDispatch = customTr => {
+      tr = customTr;
+    };
+
+    options.attachCommand(state, fakeDispatch);
+  }
+
+  closeTypeAhead(tr);
+
+  if (options.insertCurrentQueryAsRawText && currentQuery && currentQuery.length > 0) {
+    const handler = getTypeAheadHandler(state);
+    const text = handler.trigger.concat(currentQuery);
+    tr.replaceSelectionWith(state.schema.text(text));
+  }
+
+  editorView.dispatch(tr);
+
+  if (!editorView.hasFocus()) {
+    editorView.focus();
+  }
+
+  return true;
+};
+
+const search = ({
+  editorView
+}) => itemType => (query = '') => {
+  const {
+    state
+  } = editorView;
+  const handler = findHandler(itemType, state);
+
+  if (!handler) {
+    throw new Error(`Handler not found, did you load the ${itemType} plugin properly`);
+  }
+
+  open({
+    editorView
+  })(itemType)(INPUT_METHOD.KEYBOARD);
+  updateQuery(query)(editorView.state, editorView.dispatch);
+  const lastQuery = {
+    current: query
+  };
+  const last = handler.getItems({
+    query,
+    editorState: state
+  }).then(items => {
+    if (!handler.forceSelect) {
+      return items;
+    }
+
+    const forceSelectedItem = handler.forceSelect({
+      items,
+      query,
+      editorState: state
+    });
+
+    if (!forceSelectedItem) {
+      return items;
+    }
+
+    insertTypeAheadItem(editorView)({
+      handler,
+      item: forceSelectedItem,
+      query,
+      mode: SelectItemMode.SELECTED,
+      sourceListItem: items
+    });
+  });
+  const results = {
+    last
+  };
+  return {
+    type: appendValue => {
+      if (!appendValue) {
+        return;
+      }
+
+      lastQuery.current += appendValue;
+      updateQuery(lastQuery.current)(editorView.state, editorView.dispatch);
+      const promise = handler.getItems({
+        query: lastQuery.current,
+        editorState: state
+      });
+      results.last = promise;
+      return promise;
+    },
+    result: () => results.last,
+    close: close({
+      editorView
+    }),
+    insert: ({
+      index,
+      mode
+    }) => {
+      return results.last.then(result => {
+        const item = result ? result[index] : null;
+
+        if (result && item) {
+          insertTypeAheadItem(editorView)({
+            handler,
+            item,
+            query,
+            mode: mode || SelectItemMode.SELECTED,
+            sourceListItem: result
+          });
+        }
+      });
+    }
+  };
+};
+
+const insertItem = ({
+  editorView
+}) => itemType => ({
+  contentItem,
+  query,
+  sourceListItem
+}) => {
+  const {
+    state
+  } = editorView;
+  const handler = findHandler(itemType, state);
+
+  if (!handler) {
+    return false;
+  }
+
+  insertTypeAheadItem(editorView)({
+    handler,
+    item: contentItem,
+    mode: SelectItemMode.SELECTED,
+    query,
+    sourceListItem
+  });
+  return true;
+};
+
+const isOpen = ({
+  editorView
+}) => () => {
+  if (!isTypeAheadOpen(editorView.state)) {
+    return false;
+  }
+
+  const handler = getTypeAheadHandler(editorView.state);
+
+  if (!handler) {
+    return false;
+  }
+
+  return handler;
+};
+
+const currentQuery = ({
+  editorView
+}) => () => {
+  return getTypeAheadQuery(editorView.state);
+};
+
+export const createTypeAheadTools = editorView => {
+  const props = {
+    editorView
+  };
+  return {
+    isOpen: isOpen(props),
+    currentQuery: currentQuery(props),
+    close: close(props),
+    openMention: open(props)(TypeAheadAvailableNodes.MENTION),
+    searchMention: search(props)(TypeAheadAvailableNodes.MENTION),
+    openQuickInsert: open(props)(TypeAheadAvailableNodes.QUICK_INSERT),
+    searchQuickInsert: search(props)(TypeAheadAvailableNodes.QUICK_INSERT),
+    openEmoji: open(props)(TypeAheadAvailableNodes.EMOJI),
+    searchEmoji: search(props)(TypeAheadAvailableNodes.EMOJI),
+    insertItemMention: insertItem(props)(TypeAheadAvailableNodes.MENTION),
+    insertItemEmoji: insertItem(props)(TypeAheadAvailableNodes.EMOJI),
+    insertItemQuickInsert: insertItem(props)(TypeAheadAvailableNodes.QUICK_INSERT)
+  };
+};