@atlaskit/editor-plugin-type-ahead 0.6.0 → 0.7.1

package/dist/es2019/ui/hooks/use-on-force-select.js

@@ -0,0 +1,38 @@
+import { useLayoutEffect, useRef } from 'react';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { insertTypeAheadItem } from '../../commands/insert-type-ahead-item';
+export const useOnForceSelect = ({
+  triggerHandler,
+  items,
+  query,
+  editorView,
+  closePopup
+}) => {
+  const editorViewRef = useRef(editorView);
+  useLayoutEffect(() => {
+    if (!query || typeof triggerHandler.forceSelect !== 'function') {
+      return;
+    }
+    const item = triggerHandler.forceSelect({
+      items,
+      query,
+      editorState: editorViewRef.current.state
+    });
+    if (!item) {
+      return;
+    }
+    const {
+      current: view
+    } = editorViewRef;
+    closePopup();
+    queueMicrotask(() => {
+      insertTypeAheadItem(view)({
+        item,
+        mode: SelectItemMode.SPACE,
+        query,
+        handler: triggerHandler,
+        sourceListItem: items
+      });
+    });
+  }, [triggerHandler, closePopup, query, items]);
+};

package/dist/es2019/utils.js

@@ -0,0 +1,126 @@
+import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
+import { updateSelectedIndex } from './commands/update-selected-index';
+import { typeAheadListMessages } from './messages';
+import { pluginKey as typeAheadPluginKey } from './pm-plugins/key';
+import { StatsModifier } from './stats-modifier';
+export const isTypeAheadHandler = handler => {
+  return handler && Object.values(TypeAheadAvailableNodes).includes(handler.id) && typeof handler.trigger === 'string' && typeof handler.selectItem === 'function' && typeof handler.getItems === 'function';
+};
+
+/** Is a typeahead plugin open? */
+export const isTypeAheadOpen = editorState => {
+  var _typeAheadPluginKey$g, _typeAheadPluginKey$g2;
+  return !!(typeAheadPluginKey !== null && typeAheadPluginKey !== void 0 && (_typeAheadPluginKey$g = typeAheadPluginKey.getState(editorState)) !== null && _typeAheadPluginKey$g !== void 0 && (_typeAheadPluginKey$g2 = _typeAheadPluginKey$g.decorationSet) !== null && _typeAheadPluginKey$g2 !== void 0 && _typeAheadPluginKey$g2.find().length);
+};
+export const getPluginState = editorState => {
+  return typeAheadPluginKey.getState(editorState);
+};
+export const getTypeAheadHandler = editorState => {
+  var _typeAheadPluginKey$g3;
+  return (_typeAheadPluginKey$g3 = typeAheadPluginKey.getState(editorState)) === null || _typeAheadPluginKey$g3 === void 0 ? void 0 : _typeAheadPluginKey$g3.triggerHandler;
+};
+export const getTypeAheadQuery = editorState => {
+  var _typeAheadPluginKey$g4;
+  return (_typeAheadPluginKey$g4 = typeAheadPluginKey.getState(editorState)) === null || _typeAheadPluginKey$g4 === void 0 ? void 0 : _typeAheadPluginKey$g4.query;
+};
+export const isTypeAheadAllowed = state => {
+  const isOpen = isTypeAheadOpen(state);
+  // if the TypeAhead is open
+  // we should not allow it
+  return !isOpen;
+};
+export const findHandler = (id, state) => {
+  const pluginState = typeAheadPluginKey.getState(state);
+  if (!pluginState || !pluginState.typeAheadHandlers || pluginState.typeAheadHandlers.length === 0) {
+    return null;
+  }
+  const {
+    typeAheadHandlers
+  } = pluginState;
+  return typeAheadHandlers.find(h => h.id === id) || null;
+};
+export const findHandlerByTrigger = ({
+  trigger,
+  editorState
+}) => {
+  const pluginState = typeAheadPluginKey.getState(editorState);
+  if (!pluginState || !pluginState.typeAheadHandlers || pluginState.typeAheadHandlers.length === 0) {
+    return null;
+  }
+  const {
+    typeAheadHandlers
+  } = pluginState;
+  return typeAheadHandlers.find(h => h.trigger === trigger) || null;
+};
+export const moveSelectedIndex = ({
+  editorView,
+  direction
+}) => () => {
+  const typeAheadState = getPluginState(editorView.state);
+  if (!typeAheadState) {
+    return;
+  }
+  const {
+    selectedIndex,
+    items
+  } = typeAheadState;
+  const stats = typeAheadState.stats instanceof StatsModifier ? typeAheadState.stats : new StatsModifier();
+  let nextIndex;
+  if (direction === 'next') {
+    stats.increaseArrowDown();
+
+    /**
+     * See: https://product-fabric.atlassian.net/browse/ED-17200
+     * `selectedIndex` is forced to -1 now to not immediately focus the typeahead
+     * and only do so when there is explicit logic to focus into the typeahead
+     * options.
+     *
+     * This check for "set index to 1 when -1"
+     * - is a temporary workaround to get back the previous behaviour without
+     *    entirely reverting the a11y improvements
+     *
+     */
+    if (selectedIndex === -1 && items.length > 1) {
+      nextIndex = 1;
+    } else {
+      nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
+    }
+  } else {
+    stats.increaseArrowUp();
+    nextIndex = selectedIndex <= 0 ? items.length - 1 : selectedIndex - 1;
+  }
+  updateSelectedIndex(nextIndex)(editorView.state, editorView.dispatch);
+};
+export const getTypeAheadListAriaLabels = (trigger, intl, item) => {
+  var _item$mention, _item$mention2, _item$emoji, _item$emoji2, _item$emoji3;
+  switch (trigger) {
+    case '@':
+      return {
+        popupAriaLabel: intl.formatMessage(typeAheadListMessages.mentionPopupLabel),
+        listItemAriaLabel: intl.formatMessage(typeAheadListMessages.metionListItemLabel, {
+          name: (item === null || item === void 0 ? void 0 : (_item$mention = item.mention) === null || _item$mention === void 0 ? void 0 : _item$mention.name) || '',
+          shortName: (item === null || item === void 0 ? void 0 : (_item$mention2 = item.mention) === null || _item$mention2 === void 0 ? void 0 : _item$mention2.mentionName) || ''
+        })
+      };
+    case '/':
+      return {
+        popupAriaLabel: intl.formatMessage(typeAheadListMessages.quickInsertPopupLabel),
+        listItemAriaLabel: intl.formatMessage(typeAheadListMessages.emojiListItemLabel, {
+          name: (item === null || item === void 0 ? void 0 : item.title) || '',
+          shortcut: (item === null || item === void 0 ? void 0 : (_item$emoji = item.emoji) === null || _item$emoji === void 0 ? void 0 : _item$emoji.shortName) || ''
+        })
+      };
+    case ':':
+      return {
+        popupAriaLabel: intl.formatMessage(typeAheadListMessages.emojiPopupLabel),
+        listItemAriaLabel: intl.formatMessage(typeAheadListMessages.emojiListItemLabel, {
+          name: (item === null || item === void 0 ? void 0 : (_item$emoji2 = item.emoji) === null || _item$emoji2 === void 0 ? void 0 : _item$emoji2.name) || '',
+          shortcut: (item === null || item === void 0 ? void 0 : (_item$emoji3 = item.emoji) === null || _item$emoji3 === void 0 ? void 0 : _item$emoji3.shortName) || ''
+        })
+      };
+    default:
+      return {
+        popupAriaLabel: intl.formatMessage(typeAheadListMessages.typeAheadPopupLabel)
+      };
+  }
+};

package/dist/esm/api.js

@@ -0,0 +1,209 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { SelectItemMode, TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
+import { insertTypeAheadItem } from './commands/insert-type-ahead-item';
+import { updateQuery } from './commands/update-query';
+import { closeTypeAhead } from './transforms/close-type-ahead';
+import { openTypeAheadAtCursor } from './transforms/open-typeahead-at-cursor';
+import { findHandler, getTypeAheadHandler, getTypeAheadQuery, isTypeAheadOpen } from './utils';
+var open = function open(_ref) {
+  var editorView = _ref.editorView;
+  return function (itemType) {
+    return function (inputMethod) {
+      var state = editorView.state;
+      var handler = findHandler(itemType, state);
+      if (!handler) {
+        return false;
+      }
+      var tr = state.tr;
+      openTypeAheadAtCursor({
+        triggerHandler: handler,
+        inputMethod: inputMethod
+      })({
+        tr: tr
+      });
+      editorView.dispatch(tr);
+      return true;
+    };
+  };
+};
+var defaultCloseOptions = {
+  insertCurrentQueryAsRawText: false
+};
+var close = function close(_ref2) {
+  var editorView = _ref2.editorView;
+  return function () {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultCloseOptions;
+    var state = editorView.state;
+    var currentQuery = getTypeAheadQuery(editorView.state);
+    var tr = state.tr;
+    if (options.attachCommand) {
+      var fakeDispatch = function fakeDispatch(customTr) {
+        tr = customTr;
+      };
+      options.attachCommand(state, fakeDispatch);
+    }
+    closeTypeAhead(tr);
+    if (options.insertCurrentQueryAsRawText && currentQuery && currentQuery.length > 0) {
+      var handler = getTypeAheadHandler(state);
+      var text = handler.trigger.concat(currentQuery);
+      tr.replaceSelectionWith(state.schema.text(text));
+    }
+    editorView.dispatch(tr);
+    if (!editorView.hasFocus()) {
+      editorView.focus();
+    }
+    return true;
+  };
+};
+var search = function search(_ref3) {
+  var editorView = _ref3.editorView;
+  return function (itemType) {
+    return function () {
+      var query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      var state = editorView.state;
+      var handler = findHandler(itemType, state);
+      if (!handler) {
+        throw new Error("Handler not found, did you load the ".concat(itemType, " plugin properly"));
+      }
+      open({
+        editorView: editorView
+      })(itemType)(INPUT_METHOD.KEYBOARD);
+      updateQuery(query)(editorView.state, editorView.dispatch);
+      var lastQuery = {
+        current: query
+      };
+      var last = handler.getItems({
+        query: query,
+        editorState: state
+      }).then(function (items) {
+        if (!handler.forceSelect) {
+          return items;
+        }
+        var forceSelectedItem = handler.forceSelect({
+          items: items,
+          query: query,
+          editorState: state
+        });
+        if (!forceSelectedItem) {
+          return items;
+        }
+        insertTypeAheadItem(editorView)({
+          handler: handler,
+          item: forceSelectedItem,
+          query: query,
+          mode: SelectItemMode.SELECTED,
+          sourceListItem: items
+        });
+      });
+      var results = {
+        last: last
+      };
+      return {
+        type: function type(appendValue) {
+          if (!appendValue) {
+            return;
+          }
+          lastQuery.current += appendValue;
+          updateQuery(lastQuery.current)(editorView.state, editorView.dispatch);
+          var promise = handler.getItems({
+            query: lastQuery.current,
+            editorState: state
+          });
+          results.last = promise;
+          return promise;
+        },
+        result: function result() {
+          return results.last;
+        },
+        close: close({
+          editorView: editorView
+        }),
+        insert: function insert(_ref4) {
+          var index = _ref4.index,
+            mode = _ref4.mode;
+          return results.last.then(function (result) {
+            var item = result ? result[index] : null;
+            if (result && item) {
+              insertTypeAheadItem(editorView)({
+                handler: handler,
+                item: item,
+                query: query,
+                mode: mode || SelectItemMode.SELECTED,
+                sourceListItem: result
+              });
+            }
+          });
+        }
+      };
+    };
+  };
+};
+var insertItem = function insertItem(_ref5) {
+  var editorView = _ref5.editorView;
+  return function (itemType) {
+    return function (_ref6) {
+      var contentItem = _ref6.contentItem,
+        query = _ref6.query,
+        sourceListItem = _ref6.sourceListItem;
+      var state = editorView.state;
+      var handler = findHandler(itemType, state);
+      if (!handler) {
+        return false;
+      }
+      insertTypeAheadItem(editorView)({
+        handler: handler,
+        item: contentItem,
+        mode: SelectItemMode.SELECTED,
+        query: query,
+        sourceListItem: sourceListItem
+      });
+      return true;
+    };
+  };
+};
+var isOpen = function isOpen(_ref7) {
+  var editorView = _ref7.editorView;
+  return function () {
+    if (!isTypeAheadOpen(editorView.state)) {
+      return false;
+    }
+    var handler = getTypeAheadHandler(editorView.state);
+    if (!handler) {
+      return false;
+    }
+    return handler;
+  };
+};
+var currentQuery = function currentQuery(_ref8) {
+  var editorView = _ref8.editorView;
+  return function () {
+    return getTypeAheadQuery(editorView.state);
+  };
+};
+
+/**
+ * Please do not use it. Ping #help-editor and talk to the Lego team before use it.
+ *
+ * @private
+ * @deprecated
+ *
+ */
+export var createTypeAheadTools = function createTypeAheadTools(editorView) {
+  var props = {
+    editorView: 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)
+  };
+};

package/dist/esm/commands/insert-type-ahead-item.js

@@ -0,0 +1,198 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { InsertTypeAheadStages, InsertTypeAheadStep } from '@atlaskit/adf-schema/steps';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { closeHistory } from '@atlaskit/editor-prosemirror/history';
+import { Fragment, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { insertBlockNode, insertInlineNodeOrFragment } from '../insert-utils';
+import { ACTIONS } from '../pm-plugins/actions';
+import { pluginKey } from '../pm-plugins/key';
+import { StatsModifier } from '../stats-modifier';
+import { closeTypeAhead } from '../transforms/close-type-ahead';
+import { getPluginState } from '../utils';
+var validateNode = function validateNode(_ref) {
+  var schema = _ref.schema,
+    maybeNode = _ref.maybeNode;
+  if (!maybeNode) {
+    return null;
+  }
+  if (maybeNode instanceof PMNode || maybeNode instanceof Fragment) {
+    return maybeNode;
+  }
+  if (typeof maybeNode === 'string') {
+    return schema.text(maybeNode);
+  }
+  try {
+    return PMNode.fromJSON(schema, maybeNode);
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+    return null;
+  }
+};
+var createInsertCallback = function createInsertCallback(_ref2) {
+  var state = _ref2.editorState,
+    handler = _ref2.handler,
+    query = _ref2.query,
+    wasInsertedBySpace = _ref2.wasInsertedBySpace,
+    selectedIndex = _ref2.selectedIndex,
+    textStartPosition = _ref2.textStartPosition,
+    textInserted = _ref2.textInserted;
+  return function (maybeNode) {
+    var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var tr = state.tr;
+    var position = {
+      start: textStartPosition,
+      end: textStartPosition + (wasInsertedBySpace ? textInserted.length : 0)
+    };
+    var node = validateNode({
+      schema: state.schema,
+      maybeNode: maybeNode
+    });
+    if (!node) {
+      closeTypeAhead(tr);
+      // In this kind of situation we need to
+      // delete the raw text query
+      tr.delete(position.start, position.end);
+      return tr;
+    }
+    node instanceof PMNode && node.isBlock ? insertBlockNode({
+      node: node,
+      tr: tr,
+      position: position
+    }) : insertInlineNodeOrFragment({
+      maybeFragment: node,
+      tr: tr,
+      position: position,
+      selectInlineNode: Boolean(opts.selectInlineNode)
+    });
+    closeHistory(tr);
+    if (wasInsertedBySpace) {
+      return tr;
+    }
+    var config = {
+      stage: InsertTypeAheadStages.INSERTING_ITEM,
+      query: query,
+      selectedIndex: selectedIndex,
+      trigger: handler.trigger
+    };
+    tr.step(new InsertTypeAheadStep(config));
+    return tr;
+  };
+};
+var createDeleteRawTextCallback = function createDeleteRawTextCallback(_ref3) {
+  var trigger = _ref3.trigger,
+    selectedIndex = _ref3.selectedIndex,
+    position = _ref3.position,
+    query = _ref3.query,
+    wasInsertedBySpace = _ref3.wasInsertedBySpace,
+    insertItem = _ref3.insertItem;
+  return function (newState) {
+    var tr = newState.tr;
+    closeHistory(tr);
+    if (!wasInsertedBySpace) {
+      tr.delete(position.start, position.end);
+      var config = {
+        stage: InsertTypeAheadStages.DELETING_RAW_QUERY,
+        selectedIndex: selectedIndex,
+        query: query,
+        trigger: trigger
+      };
+      tr.step(new InsertTypeAheadStep(config));
+    }
+    tr.setMeta(pluginKey, {
+      action: ACTIONS.INSERT_ITEM,
+      params: insertItem
+    });
+    return tr;
+  };
+};
+export var insertTypeAheadItem = function insertTypeAheadItem(view) {
+  return function (_ref4) {
+    var item = _ref4.item,
+      handler = _ref4.handler,
+      mode = _ref4.mode,
+      query = _ref4.query,
+      sourceListItem = _ref4.sourceListItem;
+    var pluginState = getPluginState(view.state);
+    if (!pluginState) {
+      return;
+    }
+    var stats = (pluginState.stats || new StatsModifier()).serialize();
+    var meta = {
+      mode: mode,
+      query: query,
+      stats: stats,
+      sourceListItem: sourceListItem
+    };
+    var tr = view.state.tr;
+    var trigger = handler.trigger;
+    var text = "".concat(trigger).concat(query);
+    if (mode === SelectItemMode.SPACE) {
+      text = text.trim().concat(' ');
+    }
+
+    // We want to always persist selectedIndex as -1 upon selecting an item from typeahead
+    // in order to retain exist focus behaviour when undoing
+    var selectedIndex = -1;
+    var wasInsertedBySpace = mode === SelectItemMode.SPACE;
+    var textStartPosition = tr.selection.from;
+    var insertItem = function insertItem(newEditorSate) {
+      var insertCallback = createInsertCallback({
+        editorState: newEditorSate,
+        query: query,
+        mode: mode,
+        handler: handler,
+        wasInsertedBySpace: wasInsertedBySpace,
+        selectedIndex: selectedIndex,
+        textInserted: text,
+        textStartPosition: textStartPosition
+      });
+      var wasInsertCallbackCalled = false;
+      // Some wierd plugins doesn't call the insert item callback
+      // For example, the link quick insert item
+      // For those cases we need to make sure we are closing the typeahead
+      var proxyHandler = {
+        apply: function apply(target, _thisContext, argumentsList) {
+          wasInsertCallbackCalled = true;
+          return target.apply(void 0, _toConsumableArray(argumentsList));
+        }
+      };
+      var insertCallbackProxy = new Proxy(insertCallback, proxyHandler);
+      var nextTr = handler.selectItem(newEditorSate, item, insertCallbackProxy, meta);
+      if (!wasInsertCallbackCalled && nextTr) {
+        closeHistory(nextTr);
+
+        // In some cases we need to re-open the typeahead
+        // e.g.: addign mentions from the quick insert
+        //
+        // Today, the QuickInsert API doesn't have a tool
+        // to help on this. So the code below will close the typeahead
+        // only if there is no previous metadata about typeahead in the
+        // next transaction
+        if (!nextTr.getMeta(pluginKey)) {
+          closeTypeAhead(nextTr);
+        }
+      }
+      return nextTr;
+    };
+    var position = {
+      start: tr.selection.from,
+      end: tr.selection.from + text.length
+    };
+    tr.setMeta(pluginKey, {
+      action: ACTIONS.INSERT_RAW_QUERY,
+      params: createDeleteRawTextCallback({
+        wasInsertedBySpace: wasInsertedBySpace,
+        selectedIndex: selectedIndex,
+        insertItem: insertItem,
+        position: position,
+        query: query,
+        trigger: trigger
+      })
+    });
+    tr.insertText(text);
+    closeHistory(tr);
+    view.dispatch(tr);
+    view.focus();
+  };
+};

package/dist/esm/commands/update-list-items.js

@@ -0,0 +1,17 @@
+import { ACTIONS } from '../pm-plugins/actions';
+import { pluginKey as typeAheadPluginKey } from '../pm-plugins/key';
+export var updateListItem = function updateListItem(items) {
+  return function (state, dispatch) {
+    var tr = state.tr;
+    tr.setMeta(typeAheadPluginKey, {
+      action: ACTIONS.UPDATE_LIST_ITEMS,
+      params: {
+        items: items
+      }
+    });
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};

package/dist/esm/commands/update-query.js

@@ -0,0 +1,21 @@
+import { ACTIONS } from '../pm-plugins/actions';
+import { pluginKey as typeAheadPluginKey } from '../pm-plugins/key';
+export var updateQuery = function updateQuery(query) {
+  return function (state, dispatch) {
+    var pluginState = typeAheadPluginKey.getState(state);
+    if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.query) === query) {
+      return false;
+    }
+    var tr = state.tr;
+    tr.setMeta(typeAheadPluginKey, {
+      action: ACTIONS.CHANGE_QUERY,
+      params: {
+        query: query
+      }
+    });
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};

package/dist/esm/commands/update-selected-index.js

@@ -0,0 +1,21 @@
+import { ACTIONS } from '../pm-plugins/actions';
+import { pluginKey as typeAheadPluginKey } from '../pm-plugins/key';
+export var updateSelectedIndex = function updateSelectedIndex(selectedIndex) {
+  return function (state, dispatch) {
+    var pluginState = typeAheadPluginKey.getState(state);
+    if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.selectedIndex) === selectedIndex) {
+      return false;
+    }
+    var tr = state.tr;
+    tr.setMeta(typeAheadPluginKey, {
+      action: ACTIONS.UPDATE_SELECTED_INDEX,
+      params: {
+        selectedIndex: selectedIndex
+      }
+    });
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};

package/dist/esm/index.js

@@ -1 +1 @@
-export {};
+export { typeAheadPlugin } from './plugin';