@atlaskit/editor-plugin-find-replace 0.1.0

package/dist/cjs/utils/batch-decorations.js

@@ -0,0 +1,310 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _pluginFactory = require("../pm-plugins/plugin-factory");
+var _index = require("./index");
+// max number of decorations to apply at once
+var batchIncrement = 100;
+// position range to apply decorations between before alternating above or below viewport
+var posIncrement = 2000;
+/**
+ * Provides support for applying search match highlight decorations in batches
+ */
+var BatchDecorations = /*#__PURE__*/function () {
+  function BatchDecorations() {
+    (0, _classCallCheck2.default)(this, BatchDecorations);
+  }
+  (0, _createClass2.default)(BatchDecorations, [{
+    key: "stop",
+    value: function stop() {
+      if (this.rafId) {
+        cancelAnimationFrame(this.rafId);
+      }
+    }
+
+    /**
+     * Applies the decorations needed for the current search results
+     * It does so async, splitting them up into batches to help with performance
+     */
+  }, {
+    key: "applyAllSearchDecorations",
+    value: function () {
+      var _applyAllSearchDecorations = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(editorView, containerElement, addDecorations, removeDecorations) {
+        var pmElement, positions, startPos, endPos, viewportStartPos, viewportEndPos, dir, before, after, diff;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              this.stop();
+              this.addDecorations = addDecorations;
+              this.removeDecorations = removeDecorations;
+              if (containerElement) {
+                _context.next = 5;
+                break;
+              }
+              return _context.abrupt("return");
+            case 5:
+              pmElement = containerElement.querySelector('.ProseMirror');
+              if (pmElement) {
+                _context.next = 8;
+                break;
+              }
+              return _context.abrupt("return");
+            case 8:
+              positions = this.calcDecorationPositions(editorView, containerElement, pmElement);
+              startPos = positions.startPos, endPos = positions.endPos, viewportStartPos = positions.viewportStartPos, viewportEndPos = positions.viewportEndPos;
+              dir = 0;
+              before = viewportStartPos;
+              after = viewportEndPos - posIncrement;
+              _context.next = 15;
+              return this.updateDecorationsBetween(editorView, viewportStartPos, viewportEndPos);
+            case 15:
+              if (!(before > startPos || after < endPos)) {
+                _context.next = 28;
+                break;
+              }
+              if (!(dir++ % 2 === 0 && before > startPos || after >= endPos)) {
+                _context.next = 23;
+                break;
+              }
+              diff = before - startPos;
+              before = Math.max(before - posIncrement, startPos);
+              _context.next = 21;
+              return this.updateDecorationsBetween(editorView, before, before + Math.min(diff, posIncrement));
+            case 21:
+              _context.next = 26;
+              break;
+            case 23:
+              after = Math.min(after + posIncrement, endPos);
+              _context.next = 26;
+              return this.updateDecorationsBetween(editorView, after, Math.min(after + posIncrement, endPos));
+            case 26:
+              _context.next = 15;
+              break;
+            case 28:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function applyAllSearchDecorations(_x, _x2, _x3, _x4) {
+        return _applyAllSearchDecorations.apply(this, arguments);
+      }
+      return applyAllSearchDecorations;
+    }()
+  }, {
+    key: "updateDecorationsBetween",
+    value: function () {
+      var _updateDecorationsBetween = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(editorView, startPos, endPos) {
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return this.removeDecorationsBetween(editorView, startPos, endPos);
+            case 2:
+              _context2.next = 4;
+              return this.addDecorationsBetween(editorView, startPos, endPos);
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function updateDecorationsBetween(_x5, _x6, _x7) {
+        return _updateDecorationsBetween.apply(this, arguments);
+      }
+      return updateDecorationsBetween;
+    }()
+  }, {
+    key: "addDecorationsBetween",
+    value: function () {
+      var _addDecorationsBetween = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(editorView, startPos, endPos) {
+        var _this = this;
+        var selection, _getPluginState, matches, decorationSet, matchesBetween, selectionMatch, selectionIndex;
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              selection = editorView.state.selection;
+              _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state), matches = _getPluginState.matches, decorationSet = _getPluginState.decorationSet;
+              if (!(matches.length === 0)) {
+                _context3.next = 4;
+                break;
+              }
+              return _context3.abrupt("return");
+            case 4:
+              matchesBetween = matches.filter(function (m) {
+                return m.start >= startPos && (endPos === undefined || m.start < endPos);
+              });
+              selectionMatch = matches.find(function (match) {
+                return match.start >= selection.from;
+              });
+              selectionIndex = matchesBetween.findIndex(function (match) {
+                return match === selectionMatch;
+              });
+              _context3.next = 9;
+              return this.batchRequests(function (counter) {
+                var matchesToDecorate = matchesBetween.slice(counter, counter + batchIncrement);
+                if (matchesToDecorate.length === 0) {
+                  return false;
+                }
+                var useSelectionIndex = selectionIndex >= counter && selectionIndex < counter + batchIncrement;
+                if (selectionMatch && useSelectionIndex) {
+                  var selectionMatchDecoration = (0, _index.findDecorationFromMatch)(decorationSet, selectionMatch);
+                  if (selectionMatchDecoration) {
+                    matchesToDecorate.splice(selectionIndex % batchIncrement, 1);
+                    useSelectionIndex = false;
+                  }
+                }
+                if (_this.addDecorations) {
+                  _this.addDecorations((0, _index.createDecorations)(useSelectionIndex ? selectionIndex % batchIncrement : -1, matchesToDecorate));
+                }
+              }, {
+                increment: batchIncrement,
+                until: matchesBetween.length
+              });
+            case 9:
+              return _context3.abrupt("return", _context3.sent);
+            case 10:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
+      }));
+      function addDecorationsBetween(_x8, _x9, _x10) {
+        return _addDecorationsBetween.apply(this, arguments);
+      }
+      return addDecorationsBetween;
+    }()
+  }, {
+    key: "removeDecorationsBetween",
+    value: function () {
+      var _removeDecorationsBetween = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(editorView, startPos, endPos) {
+        var _this2 = this;
+        var _getPluginState2, decorationSet, decorations;
+        return _regenerator.default.wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              _getPluginState2 = (0, _pluginFactory.getPluginState)(editorView.state), decorationSet = _getPluginState2.decorationSet;
+              decorations = decorationSet.find(startPos, endPos);
+              if (!(decorations.length === 0)) {
+                _context4.next = 4;
+                break;
+              }
+              return _context4.abrupt("return");
+            case 4:
+              _context4.next = 6;
+              return this.batchRequests(function (counter) {
+                var decorationsToRemove = decorations.slice(counter, counter + batchIncrement);
+                if (decorationsToRemove.length === 0) {
+                  return false;
+                }
+                // only get those decorations whose from >= startPos
+                for (var i = 0; i < decorationsToRemove.length; i++) {
+                  if (decorationsToRemove[i].from >= startPos) {
+                    break;
+                  }
+                  decorationsToRemove = decorationsToRemove.slice(1);
+                }
+                if (_this2.removeDecorations) {
+                  _this2.removeDecorations(decorationsToRemove);
+                }
+              }, {
+                increment: batchIncrement,
+                until: decorations.length
+              });
+            case 6:
+              return _context4.abrupt("return", _context4.sent);
+            case 7:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4, this);
+      }));
+      function removeDecorationsBetween(_x11, _x12, _x13) {
+        return _removeDecorationsBetween.apply(this, arguments);
+      }
+      return removeDecorationsBetween;
+    }()
+    /**
+     * Calculates Prosemirror start and end positions we want to apply the decorations
+     * between
+     * Also calculates the positions the are the start and end of the user's viewport
+     * so we can apply decorations there first and work outwards
+     */
+  }, {
+    key: "calcDecorationPositions",
+    value: function calcDecorationPositions(editorView, containerElement, pmElement) {
+      var containerRect = containerElement.getBoundingClientRect();
+      var pmRect = pmElement.getBoundingClientRect();
+      var viewportStartPos = this.getStartPos(editorView, 0, pmRect.left);
+      var viewportEndPos = this.getEndPos(editorView, containerRect.top + containerRect.height, pmRect.left);
+      return {
+        viewportStartPos: viewportStartPos,
+        viewportEndPos: viewportEndPos,
+        startPos: 1,
+        endPos: editorView.state.doc.nodeSize
+      };
+    }
+  }, {
+    key: "getStartPos",
+    value: function getStartPos(editorView, y, x) {
+      var startPos = editorView.posAtCoords({
+        top: y,
+        left: x
+      });
+      return startPos ? startPos.pos : 1;
+    }
+  }, {
+    key: "getEndPos",
+    value: function getEndPos(editorView, y, x) {
+      var maxPos = editorView.state.doc.nodeSize;
+      var endPos = editorView.posAtCoords({
+        top: y,
+        left: x
+      });
+      return endPos ? endPos.pos : maxPos;
+    }
+
+    /**
+     * Util to batch function calls by animation frames
+     * A counter will start at 0 and increment by provided value until reaches limit
+     * Passed in fn receives the counter as a param, return false to skip waiting
+     * for the animation frame for the next call
+     */
+  }, {
+    key: "batchRequests",
+    value: function batchRequests(fn, opts) {
+      var _this3 = this;
+      var counter = 0;
+      var increment = opts.increment,
+        until = opts.until;
+      return new Promise(function (resolve) {
+        var batchedFn = function batchedFn() {
+          var result = fn(counter);
+          while (result === false && counter < until) {
+            counter += increment;
+            result = fn(counter);
+          }
+          if (counter < until) {
+            counter += increment;
+            _this3.rafId = requestAnimationFrame(batchedFn);
+          } else {
+            _this3.rafId = undefined;
+            resolve();
+          }
+        };
+        _this3.rafId = requestAnimationFrame(batchedFn);
+      });
+    }
+  }]);
+  return BatchDecorations;
+}();
+var batchDecorations = new BatchDecorations();
+var _default = exports.default = batchDecorations;

package/dist/cjs/utils/commands.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withScrollIntoView = void 0;
+var withScrollIntoView = exports.withScrollIntoView = function withScrollIntoView(command) {
+  return function (state, dispatch, view) {
+    return command(state, function (tr) {
+      tr.scrollIntoView();
+      if (dispatch) {
+        dispatch(tr);
+      }
+    }, view);
+  };
+};

package/dist/cjs/utils/index.js

@@ -0,0 +1,290 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findLostAdjacentDecorations = exports.findIndexBeforePosition = exports.findDecorationFromMatch = exports.createDecorations = exports.createDecoration = void 0;
+exports.findMatches = findMatches;
+exports.findSearchIndex = findSearchIndex;
+exports.getSelectedText = getSelectedText;
+exports.removeMatchesFromSet = exports.removeDecorationsFromSet = exports.prevIndex = exports.nextIndex = exports.isMatchAffectedByStep = exports.getSelectionForMatch = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _styles = require("../styles");
+function getSelectedText(selection) {
+  var text = '';
+  var selectedContent = selection.content().content;
+  for (var i = 0; i < selectedContent.childCount; i++) {
+    text += selectedContent.child(i).textContent;
+  }
+  return text;
+}
+var createDecorations = exports.createDecorations = function createDecorations(selectedIndex, matches) {
+  return matches.map(function (_ref, i) {
+    var start = _ref.start,
+      end = _ref.end;
+    return createDecoration(start, end, i === selectedIndex);
+  });
+};
+var createDecoration = exports.createDecoration = function createDecoration(start, end, isSelected) {
+  var className = _styles.searchMatchClass;
+  if (isSelected) {
+    className += " ".concat(_styles.selectedSearchMatchClass);
+  }
+  return _view.Decoration.inline(start, end, {
+    class: className
+  });
+};
+function findMatches(content, searchText, shouldMatchCase) {
+  var contentIndex = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  var matches = [];
+  var searchTextLength = searchText.length;
+  var textGrouping = null;
+  var collectMatch = function collectMatch(textGrouping) {
+    if (!textGrouping) {
+      return;
+    }
+    var text = textGrouping.text,
+      relativePos = textGrouping.pos;
+    var pos = contentIndex + relativePos;
+    if (!shouldMatchCase) {
+      searchText = searchText.toLowerCase();
+      text = text.toLowerCase();
+    }
+    var index = text.indexOf(searchText);
+    while (index !== -1) {
+      // Find the next substring from the end of the first, so that they don't overlap
+      var end = index + searchTextLength;
+      // Add the substring index to the position of the node
+      matches.push({
+        start: pos + index,
+        end: pos + end
+      });
+      index = text.indexOf(searchText, end);
+    }
+  };
+  if (searchTextLength > 0) {
+    content.descendants(function (node, pos) {
+      if (node.isText) {
+        if (textGrouping === null) {
+          textGrouping = {
+            text: node.text,
+            pos: pos
+          };
+        } else {
+          textGrouping.text = textGrouping.text + node.text;
+        }
+      } else {
+        collectMatch(textGrouping);
+        textGrouping = null;
+      }
+    });
+    // if there's a dangling text grouping and no non-text node to trigger collectMatch, manually collectMatch
+    if (textGrouping) {
+      collectMatch(textGrouping);
+    }
+  }
+  return matches;
+}
+
+/**
+ * Finds index of first item in matches array that comes after user's cursor pos.
+ * If `backward` is `true`, finds index of first item that comes before instead.
+ */
+function findSearchIndex(selectionPos, matches) {
+  var backward = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  if (backward) {
+    var matchIndex = matches.findIndex(function (match) {
+      return match.start >= selectionPos;
+    }) - 1;
+    if (matchIndex < 0) {
+      matchIndex = matches.length - 1; // wrap around from the end
+    }
+
+    return matchIndex;
+  }
+  return Math.max(matches.findIndex(function (match) {
+    return match.start >= selectionPos;
+  }), 0);
+}
+var nextIndex = exports.nextIndex = function nextIndex(currentIndex, total) {
+  return (currentIndex + 1) % total;
+};
+var prevIndex = exports.prevIndex = function prevIndex(currentIndex, total) {
+  return (currentIndex - 1 + total) % total;
+};
+var getSelectionForMatch = exports.getSelectionForMatch = function getSelectionForMatch(selection, doc, index, matches) {
+  var offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  if (matches[index]) {
+    return _state.TextSelection.create(doc, matches[index].start + offset);
+  }
+  return selection;
+};
+var findDecorationFromMatch = exports.findDecorationFromMatch = function findDecorationFromMatch(decorationSet, match) {
+  if (!match) {
+    return;
+  }
+  var decorations = decorationSet.find(match.start, match.end);
+  return decorations.length ? decorations.find(
+  // decorationSet.find() returns any decorations that touch the specifided
+  // positions, but we want to be stricter
+  function (decoration) {
+    return decoration.from === match.start && decoration.to === match.end;
+  }) : undefined;
+};
+var removeDecorationsFromSet = exports.removeDecorationsFromSet = function removeDecorationsFromSet(decorationSet, decorationsToRemove, doc) {
+  var prevDecorations = decorationSet.find();
+
+  // it is essential that we copy the decorations otherwise in some rare cases
+  // prosemirror-view will update our decorationsToRemove array to contain nulls
+  // instead of Decorations which ruins our check for lost decorations below
+  decorationSet = decorationSet.remove(decorationsToRemove.map(function (decoration) {
+    return (
+      // copy exists but isn't on the type definition
+      decoration.copy(decoration.from, decoration.to)
+    );
+  }));
+  var newDecorations = decorationSet.find();
+
+  // there is a bug in prosemirror-view where it can't cope with deleting inline
+  // decorations from a set in some cases (where there are multiple levels of nested
+  // children arrays), and it deletes more decorations than it should
+  // todo: ticket link
+  var lostDecorations = findLostAdjacentDecorations(decorationsToRemove, prevDecorations, newDecorations);
+  if (lostDecorations.length > 0) {
+    decorationSet = decorationSet.add(doc, lostDecorations);
+  }
+  return decorationSet;
+};
+var removeMatchesFromSet = exports.removeMatchesFromSet = function removeMatchesFromSet(decorationSet, matches, doc) {
+  var decorationsToRemove = matches.filter(function (match) {
+    return !!match;
+  }).map(function (match) {
+    return findDecorationFromMatch(decorationSet, match);
+  });
+  decorationsToRemove.forEach(function (decoration) {
+    if (decoration) {
+      decorationSet = removeDecorationsFromSet(decorationSet, [decoration], doc);
+    }
+  });
+  return decorationSet;
+};
+
+/**
+ * Finds decorations in prevDecorations that are not in newDecorations or decorationsToRemove
+ * These decorations have been lost by Prosemirror during an over eager decoration removal
+ * We need to be smart to cope with thousands of decorations without crashing everything
+ */
+var findLostAdjacentDecorations = exports.findLostAdjacentDecorations = function findLostAdjacentDecorations(decorationsToRemove, prevDecorations, newDecorations) {
+  var lostDecorations = [];
+  if (prevDecorations.length - decorationsToRemove.length > newDecorations.length) {
+    var position = decorationsToRemove.length > 0 ? decorationsToRemove[0].from : 0;
+    var prevDecorationsStartIdx = findIndexBeforePosition(prevDecorations, position);
+    var newDecorationsStartIdx = findIndexBeforePosition(newDecorations, position);
+    var startIdx = Math.min(prevDecorationsStartIdx, newDecorationsStartIdx);
+    var prevDecorationsToCheck = prevDecorations.slice(startIdx);
+    var newDecorationsToCheck = newDecorations.slice(startIdx);
+    var uniqueInPrev = [];
+    var numToFind = prevDecorationsToCheck.length - newDecorationsToCheck.length;
+    var foundAll = false;
+    var newDecorationsIdxOffset = 0;
+    var _loop = function _loop() {
+        var prevDecoration = prevDecorationsToCheck[i];
+        // this was a legit removal, skip and continue
+        if (decorationsToRemove.find(function (decoration) {
+          return decoration.from === prevDecoration.from;
+        })) {
+          newDecorationsIdxOffset -= 1;
+          return 0; // continue
+        }
+        var j = i + newDecorationsIdxOffset;
+
+        // this is a lost decoration
+        if (j >= newDecorationsToCheck.length) {
+          uniqueInPrev.push(prevDecoration);
+          if (uniqueInPrev.length === numToFind) {
+            foundAll = true;
+          }
+        }
+        for (; j < newDecorationsToCheck.length; j++) {
+          var newDecoration = newDecorationsToCheck[j];
+
+          // decoration found in both arrays, skip and continue
+          if (prevDecoration.from === newDecoration.from) {
+            break;
+          }
+
+          // this is a lost decoration
+          if (newDecoration.from > prevDecoration.from || j === newDecorationsToCheck.length - 1) {
+            uniqueInPrev.push(prevDecoration);
+            newDecorationsIdxOffset -= 1;
+            if (uniqueInPrev.length === numToFind) {
+              foundAll = true;
+            }
+            break;
+          }
+        }
+        if (foundAll) {
+          return 1; // break
+        }
+      },
+      _ret;
+    for (var i = 0; i < prevDecorationsToCheck.length; i++) {
+      _ret = _loop();
+      if (_ret === 0) continue;
+      if (_ret === 1) break;
+    }
+
+    // make sure we ignore any that we wanted to delete
+    lostDecorations = uniqueInPrev.filter(function (decoration) {
+      return !decorationsToRemove.find(function (decorationToRemove) {
+        return decoration.from === decorationToRemove.from;
+      });
+    });
+  }
+  return lostDecorations;
+};
+
+/**
+ * Searches through array in bumps of 100 to return the index of the first
+ * decoration whose 'from' value is before or equal to the position
+ */
+var findIndexBeforePosition = exports.findIndexBeforePosition = function findIndexBeforePosition(items, position) {
+  // jump in batches to cope with arrays with thousands of decorations
+  var increment = 100;
+  var index = 0;
+  for (var i = items.length - 1; i >= 0; i -= increment) {
+    if (items[i].from < position) {
+      // now we have found the 100 range, we can narrow it down to exact index
+      index = i;
+      for (var j = i; j <= items.length - 1; j++) {
+        if (items[j].from <= position) {
+          index = j;
+        } else {
+          break;
+        }
+      }
+      break;
+    }
+    if (i < 100 && i > 0) {
+      i = 100;
+    }
+  }
+  return index;
+};
+
+/**
+ * Determines whether a find/replace text Match will be changed as a result
+ * of a Step modification to the document. This is evaluated by checking
+ * both mapped and unmapped versions of the Step as in different cases the
+ * matches will match.
+ *
+ * **Note:** Match state received here is after step has been applied.
+ */
+var isMatchAffectedByStep = exports.isMatchAffectedByStep = function isMatchAffectedByStep(match, step, tr) {
+  var from = step.from,
+    to = step.to,
+    slice = step.slice;
+  var sliceSize = slice.content.size;
+  return from + sliceSize >= match.start && to - sliceSize <= match.end || tr.mapping.map(from) + sliceSize >= match.start && tr.mapping.map(to) - sliceSize <= match.end;
+};