@atlaskit/editor-plugin-find-replace 0.1.0

package/.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  rules: {
+    '@typescript-eslint/no-duplicate-imports': 'error',
+    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/ban-types': [
+      'error',
+      {
+        types: {
+          'React.FC':
+            'Please use types directly on props instead, and explicitly define children if required',
+          'React.FunctionalComponent':
+            'Please use types directly on props instead, and explicitly define children if required',
+        },
+        extendDefaults: false,
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['**/__tests__/**/*.{js,ts,tsx}', '**/examples/**/*.{js,ts,tsx}'],
+      rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+      },
+    },
+  ],
+};

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @atlaskit/editor-plugin-find-replace
+
+## 0.1.0
+
+### Minor Changes
+
+- [#66388](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66388) [`1698d83da05f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1698d83da05f) - ED-21743: Extract find replace plugin from editor-core
+
+### Patch Changes
+
+- Updated dependencies

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,30 @@
+# Editor plugin find replace
+
+Find replace plugin for @atlaskit/editor-core
+
+**Note:** This component is designed for internal Atlassian development.
+External contributors will be able to use this component but will not be able to submit issues.
+
+## Install
+---
+- **Install** - *yarn add @atlaskit/editor-plugin-analytics*
+- **npm** - [@atlaskit/editor-plugin-analytics](https://www.npmjs.com/package/@atlaskit/editor-plugin-find-replace)
+- **Source** - [Bitbucket](https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/editor/editor-plugin-find-replace)
+- **Bundle** - [unpkg.com](https://unpkg.com/@atlaskit/editor-plugin-find-replace/dist/)
+
+## Usage
+---
+**Internal use only**
+
+@atlaskit/editor-plugin-find-replace is intended for internal use by the @atlaskit/editor-core and as a plugin dependency of the Editor within your product.
+
+Direct use of this component is not supported.
+
+Please see [Atlaskit - Editor plugin find-replace](https://atlaskit.atlassian.com/packages/editor/editor-plugin-find-replace) for documentation and examples for this package.
+
+## Support
+---
+For internal Atlassian, visit the slacknv channel [#help-editor](https://atlassian.slack.com/archives/CFG3PSQ9E) for support or visit [go/editor-help](https://go/editor-help) to submit a bug.
+## License
+---
+ Please see [Atlassian Frontend - License](https://hello.atlassian.net/wiki/spaces/AF/pages/2589099144/Documentation#License) for more licensing information.

package/dist/cjs/FindReplaceToolbarButtonWithState.js

@@ -0,0 +1,166 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _commands = require("./commands");
+var _commandsWithAnalytics = require("./commands-with-analytics");
+var _FindReplaceToolbarButton = _interopRequireDefault(require("./ui/FindReplaceToolbarButton"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// light implementation of useSharedPluginState(). This is due to findreplace
+// being the only plugin that previously used WithPluginState with
+// debounce=false. That was implemented because of text sync issues
+// between editor & findreplace dialog.
+// To address under ENGHEALTH-5853
+var useSharedPluginStateNoDebounce = function useSharedPluginStateNoDebounce(api) {
+  var _useState = (0, _react.useState)(api === null || api === void 0 ? void 0 : api.findReplace.sharedState.currentState()),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  (0, _react.useLayoutEffect)(function () {
+    var unsub = api === null || api === void 0 ? void 0 : api.findReplace.sharedState.onChange(function (_ref) {
+      var nextSharedState = _ref.nextSharedState;
+      setState(nextSharedState);
+    });
+    return function () {
+      unsub === null || unsub === void 0 || unsub();
+    };
+  }, [api]);
+  return {
+    findReplaceState: state
+  };
+};
+var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithState(_ref2) {
+  var _api$analytics;
+  var popupsBoundariesElement = _ref2.popupsBoundariesElement,
+    popupsMountPoint = _ref2.popupsMountPoint,
+    popupsScrollableElement = _ref2.popupsScrollableElement,
+    isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
+    editorView = _ref2.editorView,
+    containerElement = _ref2.containerElement,
+    dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
+    featureFlags = _ref2.featureFlags,
+    takeFullWidth = _ref2.takeFullWidth,
+    api = _ref2.api;
+  var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+  var _useSharedPluginState = useSharedPluginStateNoDebounce(api),
+    findReplaceState = _useSharedPluginState.findReplaceState;
+  if (!editorView) {
+    return null;
+  }
+
+  // we need the editor to be in focus for scrollIntoView() to work
+  // so we focus it while we run the command, then put focus back into
+  // whatever element was previously focused in find replace component
+  var runWithEditorFocused = function runWithEditorFocused(fn) {
+    var activeElement = document.activeElement;
+    editorView.focus();
+    fn();
+    activeElement === null || activeElement === void 0 || activeElement.focus();
+  };
+  var dispatchCommand = function dispatchCommand(cmd) {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    cmd(state, dispatch);
+  };
+  var handleActivate = function handleActivate() {
+    runWithEditorFocused(function () {
+      return dispatchCommand((0, _commandsWithAnalytics.activateWithAnalytics)(editorAnalyticsAPI)({
+        triggerMethod: _analytics.TRIGGER_METHOD.TOOLBAR
+      }));
+    });
+  };
+  var handleFind = function handleFind(keyword) {
+    runWithEditorFocused(function () {
+      return dispatchCommand((0, _commandsWithAnalytics.findWithAnalytics)(editorAnalyticsAPI)({
+        editorView: editorView,
+        containerElement: containerElement,
+        keyword: keyword
+      }));
+    });
+  };
+  var handleFindNext = function handleFindNext(_ref3) {
+    var triggerMethod = _ref3.triggerMethod;
+    runWithEditorFocused(function () {
+      return dispatchCommand((0, _commandsWithAnalytics.findNextWithAnalytics)(editorAnalyticsAPI)({
+        triggerMethod: triggerMethod
+      }));
+    });
+  };
+  var handleFindPrev = function handleFindPrev(_ref4) {
+    var triggerMethod = _ref4.triggerMethod;
+    runWithEditorFocused(function () {
+      return dispatchCommand((0, _commandsWithAnalytics.findPrevWithAnalytics)(editorAnalyticsAPI)({
+        triggerMethod: triggerMethod
+      }));
+    });
+  };
+  var handleReplace = function handleReplace(_ref5) {
+    var triggerMethod = _ref5.triggerMethod,
+      replaceText = _ref5.replaceText;
+    runWithEditorFocused(function () {
+      return dispatchCommand((0, _commandsWithAnalytics.replaceWithAnalytics)(editorAnalyticsAPI)({
+        triggerMethod: triggerMethod,
+        replaceText: replaceText
+      }));
+    });
+  };
+  var handleReplaceAll = function handleReplaceAll(_ref6) {
+    var replaceText = _ref6.replaceText;
+    runWithEditorFocused(function () {
+      return dispatchCommand((0, _commandsWithAnalytics.replaceAllWithAnalytics)(editorAnalyticsAPI)({
+        replaceText: replaceText
+      }));
+    });
+  };
+  var handleFindBlur = function handleFindBlur() {
+    dispatchCommand((0, _commands.blur)());
+  };
+  var handleCancel = function handleCancel(_ref7) {
+    var triggerMethod = _ref7.triggerMethod;
+    dispatchCommand((0, _commandsWithAnalytics.cancelSearchWithAnalytics)(editorAnalyticsAPI)({
+      triggerMethod: triggerMethod
+    }));
+    editorView.focus();
+  };
+  var handleToggleMatchCase = function handleToggleMatchCase() {
+    dispatchCommand((0, _commands.toggleMatchCase)());
+  };
+  var findReplaceMatchCase = featureFlags.findReplaceMatchCase;
+  if (!findReplaceState) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_FindReplaceToolbarButton.default, {
+    allowMatchCase: findReplaceMatchCase,
+    shouldMatchCase: findReplaceState.shouldMatchCase,
+    onToggleMatchCase: handleToggleMatchCase,
+    isActive: findReplaceState.isActive,
+    findText: findReplaceState.findText,
+    index: findReplaceState.index,
+    numMatches: findReplaceState.matches.length,
+    replaceText: findReplaceState.replaceText,
+    shouldFocus: findReplaceState.shouldFocus,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsMountPoint: popupsMountPoint,
+    popupsScrollableElement: popupsScrollableElement,
+    isReducedSpacing: !!isToolbarReducedSpacing,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    onFindBlur: handleFindBlur,
+    onCancel: handleCancel,
+    onActivate: handleActivate,
+    onFind: handleFind,
+    onFindNext: handleFindNext,
+    onFindPrev: handleFindPrev,
+    onReplace: handleReplace,
+    onReplaceAll: handleReplaceAll,
+    takeFullWidth: !!takeFullWidth
+  });
+};
+var _default = exports.default = /*#__PURE__*/_react.default.memo(FindReplaceToolbarButtonWithState);

package/dist/cjs/actions.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FindReplaceActionTypes = void 0;
+var FindReplaceActionTypes = exports.FindReplaceActionTypes = /*#__PURE__*/function (FindReplaceActionTypes) {
+  FindReplaceActionTypes["ACTIVATE"] = "ACTIVATE";
+  FindReplaceActionTypes["FIND"] = "FIND";
+  FindReplaceActionTypes["UPDATE_DECORATIONS"] = "UPDATE_DECORATIONS";
+  FindReplaceActionTypes["FIND_NEXT"] = "FIND_NEXT";
+  FindReplaceActionTypes["FIND_PREVIOUS"] = "FIND_PREVIOUS";
+  FindReplaceActionTypes["REPLACE"] = "REPLACE";
+  FindReplaceActionTypes["REPLACE_ALL"] = "REPLACE_ALL";
+  FindReplaceActionTypes["CANCEL"] = "CANCEL";
+  FindReplaceActionTypes["BLUR"] = "BLUR";
+  FindReplaceActionTypes["TOGGLE_MATCH_CASE"] = "TOGGLE_MATCH_CASE";
+  return FindReplaceActionTypes;
+}({});

package/dist/cjs/commands-with-analytics.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.replaceWithAnalytics = exports.replaceAllWithAnalytics = exports.findWithAnalytics = exports.findPrevWithAnalytics = exports.findNextWithAnalytics = exports.cancelSearchWithAnalytics = exports.activateWithAnalytics = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _commands = require("./commands");
+var activateWithAnalytics = exports.activateWithAnalytics = function activateWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref) {
+    var triggerMethod = _ref.triggerMethod;
+    return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, function (state) {
+      return {
+        eventType: _analytics.EVENT_TYPE.UI,
+        action: _analytics.ACTION.ACTIVATED,
+        actionSubject: _analytics.ACTION_SUBJECT.FIND_REPLACE_DIALOG,
+        attributes: {
+          inputMethod: state.selection instanceof _state.TextSelection && !state.selection.empty ? _analytics.INPUT_METHOD.PREFILL : _analytics.INPUT_METHOD.KEYBOARD,
+          triggerMethod: triggerMethod
+        }
+      };
+    })((0, _commands.activate)());
+  };
+};
+var findWithAnalytics = exports.findWithAnalytics = function findWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref2) {
+    var editorView = _ref2.editorView,
+      containerElement = _ref2.containerElement,
+      keyword = _ref2.keyword;
+    return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      action: _analytics.ACTION.FIND_PERFORMED,
+      actionSubject: _analytics.ACTION_SUBJECT.TEXT
+    })((0, _commands.find)(editorView, containerElement, keyword));
+  };
+};
+var findNextWithAnalytics = exports.findNextWithAnalytics = function findNextWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref3) {
+    var triggerMethod = _ref3.triggerMethod;
+    return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      action: _analytics.ACTION.FIND_NEXT_PERFORMED,
+      actionSubject: _analytics.ACTION_SUBJECT.TEXT,
+      attributes: {
+        triggerMethod: triggerMethod
+      }
+    })((0, _commands.findNext)());
+  };
+};
+var findPrevWithAnalytics = exports.findPrevWithAnalytics = function findPrevWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref4) {
+    var triggerMethod = _ref4.triggerMethod;
+    return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      action: _analytics.ACTION.FIND_PREV_PERFORMED,
+      actionSubject: _analytics.ACTION_SUBJECT.TEXT,
+      attributes: {
+        triggerMethod: triggerMethod
+      }
+    })((0, _commands.findPrevious)());
+  };
+};
+var replaceWithAnalytics = exports.replaceWithAnalytics = function replaceWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref5) {
+    var triggerMethod = _ref5.triggerMethod,
+      replaceText = _ref5.replaceText;
+    return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      action: _analytics.ACTION.REPLACED_ONE,
+      actionSubject: _analytics.ACTION_SUBJECT.TEXT,
+      attributes: {
+        triggerMethod: triggerMethod
+      }
+    })((0, _commands.replace)(replaceText));
+  };
+};
+var replaceAllWithAnalytics = exports.replaceAllWithAnalytics = function replaceAllWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref6) {
+    var replaceText = _ref6.replaceText;
+    return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      action: _analytics.ACTION.REPLACED_ALL,
+      actionSubject: _analytics.ACTION_SUBJECT.TEXT
+    })((0, _commands.replaceAll)(replaceText));
+  };
+};
+var cancelSearchWithAnalytics = exports.cancelSearchWithAnalytics = function cancelSearchWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref7) {
+    var triggerMethod = _ref7.triggerMethod;
+    return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
+      eventType: _analytics.EVENT_TYPE.UI,
+      action: _analytics.ACTION.DEACTIVATED,
+      actionSubject: _analytics.ACTION_SUBJECT.FIND_REPLACE_DIALOG,
+      attributes: {
+        triggerMethod: triggerMethod
+      }
+    })((0, _commands.cancelSearch)());
+  };
+};

package/dist/cjs/commands.js

@@ -0,0 +1,255 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toggleMatchCase = exports.replaceAll = exports.replace = exports.removeDecorations = exports.findPrevious = exports.findNext = exports.find = exports.cancelSearch = exports.blur = exports.addDecorations = exports.activate = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _actions = require("./actions");
+var _pluginFactory = require("./pm-plugins/plugin-factory");
+var _utils = require("./utils");
+var _batchDecorations = _interopRequireDefault(require("./utils/batch-decorations"));
+var _commands = require("./utils/commands");
+var activate = exports.activate = function activate() {
+  return (0, _pluginFactory.createCommand)(function (state) {
+    var selection = state.selection;
+    var findText;
+    var matches;
+    var index;
+
+    // if user has selected text and hit cmd-f, set that as the keyword
+    if (selection instanceof _state.TextSelection && !selection.empty) {
+      findText = (0, _utils.getSelectedText)(selection);
+      var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+        shouldMatchCase = _getPluginState.shouldMatchCase;
+      matches = (0, _utils.findMatches)(state.doc, findText, shouldMatchCase);
+      index = (0, _utils.findSearchIndex)(selection.from, matches);
+    }
+    return {
+      type: _actions.FindReplaceActionTypes.ACTIVATE,
+      findText: findText,
+      matches: matches,
+      index: index
+    };
+  });
+};
+var find = exports.find = function find(editorView, containerElement, keyword) {
+  return (0, _commands.withScrollIntoView)((0, _pluginFactory.createCommand)(function (state) {
+    var selection = state.selection;
+    var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
+      shouldMatchCase = _getPluginState2.shouldMatchCase;
+    var matches = keyword !== undefined ? (0, _utils.findMatches)(state.doc, keyword, shouldMatchCase) : [];
+    var index = (0, _utils.findSearchIndex)(selection.from, matches);
+
+    // we can't just apply all the decorations to highlight the search results at once
+    // as if there are a lot ProseMirror cries :'(
+    _batchDecorations.default.applyAllSearchDecorations(editorView, containerElement, function (decorations) {
+      return addDecorations(decorations)(editorView.state, editorView.dispatch);
+    }, function (decorations) {
+      return removeDecorations(decorations)(editorView.state, editorView.dispatch);
+    });
+    return {
+      type: _actions.FindReplaceActionTypes.FIND,
+      findText: keyword || '',
+      matches: matches,
+      index: index
+    };
+  }, function (tr, state) {
+    var selection = state.selection;
+    var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
+      shouldMatchCase = _getPluginState3.shouldMatchCase;
+    var matches = keyword !== undefined ? (0, _utils.findMatches)(state.doc, keyword, shouldMatchCase) : [];
+    if (matches.length > 0) {
+      var index = (0, _utils.findSearchIndex)(selection.from, matches);
+      return tr.setSelection((0, _utils.getSelectionForMatch)(tr.selection, tr.doc, index, matches));
+    }
+    return tr;
+  }));
+};
+var findNext = exports.findNext = function findNext() {
+  return (0, _commands.withScrollIntoView)((0, _pluginFactory.createCommand)(function (state) {
+    return findInDirection(state, 'next');
+  }, function (tr, state) {
+    var _getPluginState4 = (0, _pluginFactory.getPluginState)(state),
+      matches = _getPluginState4.matches,
+      index = _getPluginState4.index;
+    // can't use index from plugin state because if the cursor has moved, it will still be the
+    // OLD index (the find next operation should look for the first match forward starting
+    // from the current cursor position)
+    var searchIndex = (0, _utils.findSearchIndex)(state.selection.from, matches);
+    if (searchIndex === index) {
+      // cursor has not moved, so we just want to find the next in matches array
+      searchIndex = (0, _utils.nextIndex)(searchIndex, matches.length);
+    }
+    return tr.setSelection((0, _utils.getSelectionForMatch)(tr.selection, tr.doc, searchIndex, matches));
+  }));
+};
+var findPrevious = exports.findPrevious = function findPrevious() {
+  return (0, _commands.withScrollIntoView)((0, _pluginFactory.createCommand)(function (state) {
+    return findInDirection(state, 'previous');
+  }, function (tr, state) {
+    var _getPluginState5 = (0, _pluginFactory.getPluginState)(state),
+      matches = _getPluginState5.matches;
+    // can't use index from plugin state because if the cursor has moved, it will still be the
+    // OLD index (the find prev operation should look for the first match backward starting
+    // from the current cursor position)
+    var searchIndex = (0, _utils.findSearchIndex)(state.selection.from, matches, true);
+    return tr.setSelection((0, _utils.getSelectionForMatch)(tr.selection, tr.doc, searchIndex, matches));
+  }));
+};
+var findInDirection = function findInDirection(state, dir) {
+  var pluginState = (0, _pluginFactory.getPluginState)(state);
+  var matches = pluginState.matches,
+    findText = pluginState.findText;
+  var decorationSet = pluginState.decorationSet,
+    index = pluginState.index;
+  if (findText) {
+    var searchIndex = (0, _utils.findSearchIndex)(state.selection.from, matches, dir === 'previous');
+    // compare index from plugin state and index of first match forward from cursor position
+    if (index === searchIndex) {
+      // normal case, cycling through matches
+      index = dir === 'next' ? (0, _utils.nextIndex)(index, matches.length) : (0, _utils.prevIndex)(index, matches.length);
+    } else {
+      // cursor has moved
+      index = searchIndex;
+    }
+    decorationSet = updateSelectedHighlight(state, index);
+  }
+  return {
+    type: dir === 'next' ? _actions.FindReplaceActionTypes.FIND_NEXT : _actions.FindReplaceActionTypes.FIND_PREVIOUS,
+    index: index,
+    decorationSet: decorationSet
+  };
+};
+var replace = exports.replace = function replace(replaceText) {
+  return (0, _commands.withScrollIntoView)((0, _pluginFactory.createCommand)(function (state) {
+    var pluginState = (0, _pluginFactory.getPluginState)(state);
+    var findText = pluginState.findText;
+    var decorationSet = pluginState.decorationSet,
+      matches = pluginState.matches,
+      index = pluginState.index;
+    decorationSet = updateSelectedHighlight(state, (0, _utils.nextIndex)(index, matches.length));
+    if (replaceText.toLowerCase().indexOf(findText.toLowerCase()) === -1) {
+      decorationSet = (0, _utils.removeMatchesFromSet)(decorationSet, [matches[index]], state.doc);
+      matches.splice(index, 1);
+      if (index > matches.length - 1) {
+        index = 0;
+      }
+    } else {
+      index = (0, _utils.nextIndex)(index, matches.length);
+    }
+    return {
+      type: _actions.FindReplaceActionTypes.REPLACE,
+      replaceText: replaceText,
+      decorationSet: decorationSet,
+      matches: matches,
+      index: index
+    };
+  }, function (tr, state) {
+    var _getPluginState6 = (0, _pluginFactory.getPluginState)(state),
+      matches = _getPluginState6.matches,
+      index = _getPluginState6.index,
+      findText = _getPluginState6.findText;
+    if (matches[index]) {
+      var _matches$index = matches[index],
+        start = _matches$index.start,
+        end = _matches$index.end;
+      var newIndex = (0, _utils.nextIndex)(index, matches.length);
+      tr.insertText(replaceText, start, end).setSelection((0, _utils.getSelectionForMatch)(tr.selection, tr.doc, newIndex, matches, newIndex === 0 ? 0 : replaceText.length - findText.length));
+    }
+    return tr;
+  }));
+};
+var replaceAll = exports.replaceAll = function replaceAll(replaceText) {
+  return (0, _pluginFactory.createCommand)({
+    type: _actions.FindReplaceActionTypes.REPLACE_ALL,
+    replaceText: replaceText,
+    decorationSet: _view.DecorationSet.empty,
+    matches: [],
+    index: 0
+  }, function (tr, state) {
+    var pluginState = (0, _pluginFactory.getPluginState)(state);
+    pluginState.matches.forEach(function (match) {
+      tr.insertText(replaceText, tr.mapping.map(match.start), tr.mapping.map(match.end));
+    });
+    tr.setMeta('scrollIntoView', false);
+    return tr;
+  });
+};
+var addDecorations = exports.addDecorations = function addDecorations(decorations) {
+  return (0, _pluginFactory.createCommand)(function (state) {
+    var _getPluginState7 = (0, _pluginFactory.getPluginState)(state),
+      decorationSet = _getPluginState7.decorationSet;
+    return {
+      type: _actions.FindReplaceActionTypes.UPDATE_DECORATIONS,
+      decorationSet: decorationSet.add(state.doc, decorations)
+    };
+  });
+};
+var removeDecorations = exports.removeDecorations = function removeDecorations(decorations) {
+  return (0, _pluginFactory.createCommand)(function (state) {
+    var _getPluginState8 = (0, _pluginFactory.getPluginState)(state),
+      decorationSet = _getPluginState8.decorationSet;
+    return {
+      type: _actions.FindReplaceActionTypes.UPDATE_DECORATIONS,
+      decorationSet: (0, _utils.removeDecorationsFromSet)(decorationSet, decorations, state.doc)
+    };
+  });
+};
+var cancelSearch = exports.cancelSearch = function cancelSearch() {
+  return (0, _pluginFactory.createCommand)(function () {
+    _batchDecorations.default.stop();
+    return {
+      type: _actions.FindReplaceActionTypes.CANCEL
+    };
+  });
+};
+var blur = exports.blur = function blur() {
+  return (0, _pluginFactory.createCommand)({
+    type: _actions.FindReplaceActionTypes.BLUR
+  });
+};
+var toggleMatchCase = exports.toggleMatchCase = function toggleMatchCase() {
+  return (0, _pluginFactory.createCommand)({
+    type: _actions.FindReplaceActionTypes.TOGGLE_MATCH_CASE
+  });
+};
+var updateSelectedHighlight = function updateSelectedHighlight(state, nextSelectedIndex) {
+  var _getPluginState9 = (0, _pluginFactory.getPluginState)(state),
+    decorationSet = _getPluginState9.decorationSet,
+    index = _getPluginState9.index,
+    matches = _getPluginState9.matches;
+  var currentSelectedMatch = matches[index];
+  var nextSelectedMatch = matches[nextSelectedIndex];
+  if (index === nextSelectedIndex) {
+    return decorationSet;
+  }
+  var currentSelectedDecoration = (0, _utils.findDecorationFromMatch)(decorationSet, currentSelectedMatch);
+  var nextSelectedDecoration = (0, _utils.findDecorationFromMatch)(decorationSet, nextSelectedMatch);
+
+  // Update decorations so the current selected match becomes a normal match
+  // and the next selected gets the selected styling
+  var decorationsToRemove = [];
+  if (currentSelectedDecoration) {
+    decorationsToRemove.push(currentSelectedDecoration);
+  }
+  if (nextSelectedDecoration) {
+    decorationsToRemove.push(nextSelectedDecoration);
+  }
+  if (decorationsToRemove.length > 0) {
+    // removeDecorationsFromSet depends on decorations being pre-sorted
+    decorationsToRemove.sort(function (a, b) {
+      return a.from < b.from ? -1 : 1;
+    });
+    decorationSet = (0, _utils.removeDecorationsFromSet)(decorationSet, decorationsToRemove, state.doc);
+  }
+  if (currentSelectedMatch) {
+    decorationSet = decorationSet.add(state.doc, [(0, _utils.createDecoration)(currentSelectedMatch.start, currentSelectedMatch.end)]);
+  }
+  if (nextSelectedMatch) {
+    decorationSet = decorationSet.add(state.doc, [(0, _utils.createDecoration)(nextSelectedMatch.start, nextSelectedMatch.end, true)]);
+  }
+  return decorationSet;
+};

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "findReplacePlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.findReplacePlugin;
+  }
+});
+var _plugin = require("./plugin");