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

package/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  rules: {
+    '@typescript-eslint/no-duplicate-imports': 'error',
+  },
+};

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 0.7.1
+
+### Patch Changes
+
+- [#41802](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41802) [`d20ecc5a9db`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d20ecc5a9db) - Apply improved linting to type-ahead plugin.
+
+## 0.7.0
+
+### Minor Changes
+
+- [#41047](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41047) [`8f0b00d165f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8f0b00d165f) - [ED-20003] Extract TypeAhead from editor-core to its own package @atlaskit/editor-plugin-type-ahead
+
 ## 0.6.0
 
 ### Minor Changes

package/dist/cjs/api.js

@@ -0,0 +1,215 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createTypeAheadTools = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _insertTypeAheadItem = require("./commands/insert-type-ahead-item");
+var _updateQuery = require("./commands/update-query");
+var _closeTypeAhead = require("./transforms/close-type-ahead");
+var _openTypeaheadAtCursor = require("./transforms/open-typeahead-at-cursor");
+var _utils = require("./utils");
+var open = function open(_ref) {
+  var editorView = _ref.editorView;
+  return function (itemType) {
+    return function (inputMethod) {
+      var state = editorView.state;
+      var handler = (0, _utils.findHandler)(itemType, state);
+      if (!handler) {
+        return false;
+      }
+      var tr = state.tr;
+      (0, _openTypeaheadAtCursor.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 = (0, _utils.getTypeAheadQuery)(editorView.state);
+    var tr = state.tr;
+    if (options.attachCommand) {
+      var fakeDispatch = function fakeDispatch(customTr) {
+        tr = customTr;
+      };
+      options.attachCommand(state, fakeDispatch);
+    }
+    (0, _closeTypeAhead.closeTypeAhead)(tr);
+    if (options.insertCurrentQueryAsRawText && currentQuery && currentQuery.length > 0) {
+      var handler = (0, _utils.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 = (0, _utils.findHandler)(itemType, state);
+      if (!handler) {
+        throw new Error("Handler not found, did you load the ".concat(itemType, " plugin properly"));
+      }
+      open({
+        editorView: editorView
+      })(itemType)(_analytics.INPUT_METHOD.KEYBOARD);
+      (0, _updateQuery.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;
+        }
+        (0, _insertTypeAheadItem.insertTypeAheadItem)(editorView)({
+          handler: handler,
+          item: forceSelectedItem,
+          query: query,
+          mode: _typeAhead.SelectItemMode.SELECTED,
+          sourceListItem: items
+        });
+      });
+      var results = {
+        last: last
+      };
+      return {
+        type: function type(appendValue) {
+          if (!appendValue) {
+            return;
+          }
+          lastQuery.current += appendValue;
+          (0, _updateQuery.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) {
+              (0, _insertTypeAheadItem.insertTypeAheadItem)(editorView)({
+                handler: handler,
+                item: item,
+                query: query,
+                mode: mode || _typeAhead.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 = (0, _utils.findHandler)(itemType, state);
+      if (!handler) {
+        return false;
+      }
+      (0, _insertTypeAheadItem.insertTypeAheadItem)(editorView)({
+        handler: handler,
+        item: contentItem,
+        mode: _typeAhead.SelectItemMode.SELECTED,
+        query: query,
+        sourceListItem: sourceListItem
+      });
+      return true;
+    };
+  };
+};
+var isOpen = function isOpen(_ref7) {
+  var editorView = _ref7.editorView;
+  return function () {
+    if (!(0, _utils.isTypeAheadOpen)(editorView.state)) {
+      return false;
+    }
+    var handler = (0, _utils.getTypeAheadHandler)(editorView.state);
+    if (!handler) {
+      return false;
+    }
+    return handler;
+  };
+};
+var currentQuery = function currentQuery(_ref8) {
+  var editorView = _ref8.editorView;
+  return function () {
+    return (0, _utils.getTypeAheadQuery)(editorView.state);
+  };
+};
+
+/**
+ * Please do not use it. Ping #help-editor and talk to the Lego team before use it.
+ *
+ * @private
+ * @deprecated
+ *
+ */
+var createTypeAheadTools = exports.createTypeAheadTools = function createTypeAheadTools(editorView) {
+  var props = {
+    editorView: editorView
+  };
+  return {
+    isOpen: isOpen(props),
+    currentQuery: currentQuery(props),
+    close: close(props),
+    openMention: open(props)(_typeAhead.TypeAheadAvailableNodes.MENTION),
+    searchMention: search(props)(_typeAhead.TypeAheadAvailableNodes.MENTION),
+    openQuickInsert: open(props)(_typeAhead.TypeAheadAvailableNodes.QUICK_INSERT),
+    searchQuickInsert: search(props)(_typeAhead.TypeAheadAvailableNodes.QUICK_INSERT),
+    openEmoji: open(props)(_typeAhead.TypeAheadAvailableNodes.EMOJI),
+    searchEmoji: search(props)(_typeAhead.TypeAheadAvailableNodes.EMOJI),
+    insertItemMention: insertItem(props)(_typeAhead.TypeAheadAvailableNodes.MENTION),
+    insertItemEmoji: insertItem(props)(_typeAhead.TypeAheadAvailableNodes.EMOJI),
+    insertItemQuickInsert: insertItem(props)(_typeAhead.TypeAheadAvailableNodes.QUICK_INSERT)
+  };
+};

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

@@ -0,0 +1,205 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.insertTypeAheadItem = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _steps = require("@atlaskit/adf-schema/steps");
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _history = require("@atlaskit/editor-prosemirror/history");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _insertUtils = require("../insert-utils");
+var _actions = require("../pm-plugins/actions");
+var _key = require("../pm-plugins/key");
+var _statsModifier = require("../stats-modifier");
+var _closeTypeAhead = require("../transforms/close-type-ahead");
+var _utils = require("../utils");
+var validateNode = function validateNode(_ref) {
+  var schema = _ref.schema,
+    maybeNode = _ref.maybeNode;
+  if (!maybeNode) {
+    return null;
+  }
+  if (maybeNode instanceof _model.Node || maybeNode instanceof _model.Fragment) {
+    return maybeNode;
+  }
+  if (typeof maybeNode === 'string') {
+    return schema.text(maybeNode);
+  }
+  try {
+    return _model.Node.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) {
+      (0, _closeTypeAhead.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 _model.Node && node.isBlock ? (0, _insertUtils.insertBlockNode)({
+      node: node,
+      tr: tr,
+      position: position
+    }) : (0, _insertUtils.insertInlineNodeOrFragment)({
+      maybeFragment: node,
+      tr: tr,
+      position: position,
+      selectInlineNode: Boolean(opts.selectInlineNode)
+    });
+    (0, _history.closeHistory)(tr);
+    if (wasInsertedBySpace) {
+      return tr;
+    }
+    var config = {
+      stage: _steps.InsertTypeAheadStages.INSERTING_ITEM,
+      query: query,
+      selectedIndex: selectedIndex,
+      trigger: handler.trigger
+    };
+    tr.step(new _steps.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;
+    (0, _history.closeHistory)(tr);
+    if (!wasInsertedBySpace) {
+      tr.delete(position.start, position.end);
+      var config = {
+        stage: _steps.InsertTypeAheadStages.DELETING_RAW_QUERY,
+        selectedIndex: selectedIndex,
+        query: query,
+        trigger: trigger
+      };
+      tr.step(new _steps.InsertTypeAheadStep(config));
+    }
+    tr.setMeta(_key.pluginKey, {
+      action: _actions.ACTIONS.INSERT_ITEM,
+      params: insertItem
+    });
+    return tr;
+  };
+};
+var insertTypeAheadItem = exports.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 = (0, _utils.getPluginState)(view.state);
+    if (!pluginState) {
+      return;
+    }
+    var stats = (pluginState.stats || new _statsModifier.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 === _typeAhead.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 === _typeAhead.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, (0, _toConsumableArray2.default)(argumentsList));
+        }
+      };
+      var insertCallbackProxy = new Proxy(insertCallback, proxyHandler);
+      var nextTr = handler.selectItem(newEditorSate, item, insertCallbackProxy, meta);
+      if (!wasInsertCallbackCalled && nextTr) {
+        (0, _history.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(_key.pluginKey)) {
+          (0, _closeTypeAhead.closeTypeAhead)(nextTr);
+        }
+      }
+      return nextTr;
+    };
+    var position = {
+      start: tr.selection.from,
+      end: tr.selection.from + text.length
+    };
+    tr.setMeta(_key.pluginKey, {
+      action: _actions.ACTIONS.INSERT_RAW_QUERY,
+      params: createDeleteRawTextCallback({
+        wasInsertedBySpace: wasInsertedBySpace,
+        selectedIndex: selectedIndex,
+        insertItem: insertItem,
+        position: position,
+        query: query,
+        trigger: trigger
+      })
+    });
+    tr.insertText(text);
+    (0, _history.closeHistory)(tr);
+    view.dispatch(tr);
+    view.focus();
+  };
+};

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateListItem = void 0;
+var _actions = require("../pm-plugins/actions");
+var _key = require("../pm-plugins/key");
+var updateListItem = exports.updateListItem = function updateListItem(items) {
+  return function (state, dispatch) {
+    var tr = state.tr;
+    tr.setMeta(_key.pluginKey, {
+      action: _actions.ACTIONS.UPDATE_LIST_ITEMS,
+      params: {
+        items: items
+      }
+    });
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateQuery = void 0;
+var _actions = require("../pm-plugins/actions");
+var _key = require("../pm-plugins/key");
+var updateQuery = exports.updateQuery = function updateQuery(query) {
+  return function (state, dispatch) {
+    var pluginState = _key.pluginKey.getState(state);
+    if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.query) === query) {
+      return false;
+    }
+    var tr = state.tr;
+    tr.setMeta(_key.pluginKey, {
+      action: _actions.ACTIONS.CHANGE_QUERY,
+      params: {
+        query: query
+      }
+    });
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateSelectedIndex = void 0;
+var _actions = require("../pm-plugins/actions");
+var _key = require("../pm-plugins/key");
+var updateSelectedIndex = exports.updateSelectedIndex = function updateSelectedIndex(selectedIndex) {
+  return function (state, dispatch) {
+    var pluginState = _key.pluginKey.getState(state);
+    if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.selectedIndex) === selectedIndex) {
+      return false;
+    }
+    var tr = state.tr;
+    tr.setMeta(_key.pluginKey, {
+      action: _actions.ACTIONS.UPDATE_SELECTED_INDEX,
+      params: {
+        selectedIndex: selectedIndex
+      }
+    });
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};

package/dist/cjs/index.js

@@ -2,4 +2,11 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+Object.defineProperty(exports, "typeAheadPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.typeAheadPlugin;
+  }
+});
+var _plugin = require("./plugin");

package/dist/cjs/insert-utils.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.insertInlineNodeOrFragment = exports.insertBlockNode = void 0;
+var _insert = require("@atlaskit/editor-common/insert");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _state = require("@atlaskit/editor-prosemirror/state");
+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);
+}
+var insertBlockNode = exports.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 = (0, _insert.normaliseNestedLayout)(tr, node);
+
+    // Handle edge cases for hr and mediaSingle
+    var inserted = (0, _insert.safeInsert)(nodeNormalized, mappedStart)(tr);
+    if (inserted) {
+      return tr;
+    }
+    var sliceInserted = _model.Slice.maxOpen(_model.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 = _state.TextSelection.findFrom(tr.doc.resolve(openPosition), FORWARD_DIRECTION, true);
+    if (nextSelection) {
+      return tr.setSelection(nextSelection);
+    }
+  }
+  return tr;
+};
+var insertInlineNodeOrFragment = exports.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 _model.Node ? _model.Fragment.from(maybeFragment) : maybeFragment;
+  tr.replaceWith(start, end, fragment);
+  if (selectInlineNode) {
+    return tr.setSelection(_state.NodeSelection.create(tr.doc, start));
+  }
+  return tr.setSelection(_state.TextSelection.near(tr.doc.resolve(start + fragment.size)));
+};