@atlaskit/editor-plugin-find-replace 0.1.0

package/dist/cjs/plugin.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findReplacePlugin = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _FindReplaceToolbarButtonWithState = _interopRequireDefault(require("./FindReplaceToolbarButtonWithState"));
+var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
+var _main = require("./pm-plugins/main");
+var _pluginKey = require("./pm-plugins/plugin-key");
+var findReplacePlugin = exports.findReplacePlugin = function findReplacePlugin(_ref) {
+  var _api$featureFlags;
+  var props = _ref.config,
+    api = _ref.api;
+  var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  return {
+    name: 'findReplace',
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'findReplace',
+        plugin: function plugin(_ref2) {
+          var dispatch = _ref2.dispatch;
+          return (0, _main.createPlugin)(dispatch);
+        }
+      }, {
+        name: 'findReplaceKeymap',
+        plugin: function plugin() {
+          var _api$analytics;
+          return (0, _keymap.default)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+        }
+      }];
+    },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return _pluginKey.findReplacePluginKey.getState(editorState) || undefined;
+    },
+    actions: {
+      getToolbarButton: function getToolbarButton(_ref3) {
+        var popupsBoundariesElement = _ref3.popupsBoundariesElement,
+          popupsMountPoint = _ref3.popupsMountPoint,
+          popupsScrollableElement = _ref3.popupsScrollableElement,
+          editorView = _ref3.editorView,
+          containerElement = _ref3.containerElement,
+          dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent,
+          isToolbarReducedSpacing = _ref3.isToolbarReducedSpacing;
+        return /*#__PURE__*/_react.default.createElement(_FindReplaceToolbarButtonWithState.default, {
+          popupsBoundariesElement: popupsBoundariesElement,
+          popupsMountPoint: popupsMountPoint,
+          popupsScrollableElement: popupsScrollableElement,
+          editorView: editorView,
+          containerElement: containerElement,
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent
+          // `allowMatchCase` comes through the preset, but not the feature flags
+          // prop with the `ComposableEditor` - grab the FFs from the editor API
+          // instead until we clean this up.
+          ,
+          featureFlags: featureFlags,
+          isToolbarReducedSpacing: isToolbarReducedSpacing,
+          api: api
+        });
+      }
+    },
+    primaryToolbarComponent: function primaryToolbarComponent(_ref4) {
+      var popupsBoundariesElement = _ref4.popupsBoundariesElement,
+        popupsMountPoint = _ref4.popupsMountPoint,
+        popupsScrollableElement = _ref4.popupsScrollableElement,
+        isToolbarReducedSpacing = _ref4.isToolbarReducedSpacing,
+        editorView = _ref4.editorView,
+        containerElement = _ref4.containerElement,
+        dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent;
+      if (props !== null && props !== void 0 && props.twoLineEditorToolbar) {
+        return null;
+      } else {
+        return /*#__PURE__*/_react.default.createElement(_FindReplaceToolbarButtonWithState.default, {
+          popupsBoundariesElement: popupsBoundariesElement,
+          popupsMountPoint: popupsMountPoint,
+          popupsScrollableElement: popupsScrollableElement,
+          isToolbarReducedSpacing: isToolbarReducedSpacing,
+          editorView: editorView,
+          containerElement: containerElement,
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+          takeFullWidth: props === null || props === void 0 ? void 0 : props.takeFullWidth,
+          featureFlags: featureFlags,
+          api: api
+        });
+      }
+    }
+  };
+};

package/dist/cjs/pm-plugins/keymap.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _commandsWithAnalytics = require("../commands-with-analytics");
+var activateFindReplace = function activateFindReplace(editorAnalyticsAPI) {
+  return function (state, dispatch) {
+    (0, _commandsWithAnalytics.activateWithAnalytics)(editorAnalyticsAPI)({
+      triggerMethod: _analytics.TRIGGER_METHOD.SHORTCUT
+    })(state, dispatch);
+    return true;
+  };
+};
+var keymapPlugin = function keymapPlugin(editorAnalyticsAPI) {
+  var list = {};
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.find.common, activateFindReplace(editorAnalyticsAPI), list);
+  return (0, _keymap.keymap)(list);
+};
+var _default = exports.default = keymapPlugin;

package/dist/cjs/pm-plugins/main.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.initialState = exports.createPlugin = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _pluginFactory = require("./plugin-factory");
+var _pluginKey = require("./plugin-key");
+var initialState = exports.initialState = {
+  isActive: false,
+  shouldFocus: false,
+  findText: '',
+  replaceText: '',
+  index: 0,
+  matches: [],
+  decorationSet: _view.DecorationSet.empty,
+  shouldMatchCase: false
+};
+var createPlugin = exports.createPlugin = function createPlugin(dispatch) {
+  return new _safePlugin.SafePlugin({
+    key: _pluginKey.findReplacePluginKey,
+    state: (0, _pluginFactory.createPluginState)(dispatch, function () {
+      return initialState;
+    }),
+    props: {
+      decorations: function decorations(state) {
+        var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+          isActive = _getPluginState.isActive,
+          findText = _getPluginState.findText,
+          decorationSet = _getPluginState.decorationSet;
+        if (isActive && findText) {
+          return decorationSet;
+        }
+      }
+    }
+  });
+};

package/dist/cjs/pm-plugins/plugin-factory.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPluginState = exports.createPluginState = exports.createCommand = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _utils = require("@atlaskit/editor-common/utils");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _reducer = _interopRequireDefault(require("../reducer"));
+var _utils2 = require("../utils");
+var _array = require("../utils/array");
+var _main = require("./main");
+var _pluginKey = require("./plugin-key");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // TODO: move into index export
+var handleDocChanged = function handleDocChanged(tr, pluginState) {
+  var isActive = pluginState.isActive,
+    findText = pluginState.findText;
+  if (!isActive || !findText) {
+    return pluginState;
+  }
+  if (!tr.steps.find(_utils.stepHasSlice)) {
+    return pluginState;
+  }
+  var index = pluginState.index,
+    decorationSet = pluginState.decorationSet,
+    matches = pluginState.matches,
+    shouldMatchCase = pluginState.shouldMatchCase;
+  var newMatches = (0, _utils2.findMatches)(tr.doc, findText, shouldMatchCase);
+  decorationSet = decorationSet.map(tr.mapping, tr.doc);
+  var numDecorations = decorationSet.find().length;
+  var mappedMatches = matches.map(function (match) {
+    return {
+      start: tr.mapping.map(match.start),
+      end: tr.mapping.map(match.end)
+    };
+  });
+  var matchesToAdd = [];
+  var matchesToDelete = [];
+  if (newMatches.length > 0 && numDecorations === 0) {
+    matchesToAdd = newMatches;
+  } else if (newMatches.length === 0 && numDecorations > 0) {
+    decorationSet = _view.DecorationSet.empty;
+  } else if (newMatches.length > 0 || numDecorations > 0) {
+    // go through tr steps and find any new matches from user adding content or
+    // any dead matches from user deleting content
+    tr.steps.forEach(function (step) {
+      if ((0, _utils.stepHasSlice)(step)) {
+        // add all matches that are between the affected positions and don't already have
+        // corresponding decorations
+        matchesToAdd = [].concat((0, _toConsumableArray2.default)(matchesToAdd), (0, _toConsumableArray2.default)(newMatches.filter(function (match) {
+          return (0, _utils2.isMatchAffectedByStep)(match, step, tr) && !(0, _utils2.findDecorationFromMatch)(decorationSet, match);
+        })));
+
+        // delete any matches that are missing from the newMatches array and have a
+        // corresponding decoration
+        matchesToDelete = [].concat((0, _toConsumableArray2.default)(matchesToDelete), (0, _toConsumableArray2.default)((0, _array.findUniqueItemsIn)(mappedMatches.filter(function (match) {
+          return (0, _utils2.isMatchAffectedByStep)(match, step, tr) && !!(0, _utils2.findDecorationFromMatch)(decorationSet, match);
+        }), newMatches, function (firstMatch, secondMatch) {
+          return firstMatch.start === secondMatch.start && firstMatch.end === secondMatch.end;
+        })));
+      }
+    });
+  }
+
+  // update decorations if matches changed following document update
+  if (matchesToDelete.length > 0) {
+    var decorationsToDelete = matchesToDelete.reduce(function (decorations, match) {
+      return [].concat((0, _toConsumableArray2.default)(decorations), (0, _toConsumableArray2.default)(decorationSet.find(match.start, match.end)));
+    }, []);
+    decorationSet = (0, _utils2.removeDecorationsFromSet)(decorationSet, decorationsToDelete, tr.doc);
+  }
+  if (matchesToAdd.length > 0) {
+    decorationSet = decorationSet.add(tr.doc, (0, _utils2.createDecorations)(tr.selection.from, matchesToAdd));
+  }
+
+  // update selected match if it has changed
+  var newIndex = index;
+  var selectedMatch = mappedMatches[index];
+  if (selectedMatch) {
+    newIndex = newMatches.findIndex(function (match) {
+      return match.start === selectedMatch.start;
+    });
+  }
+  if (newIndex === undefined || newIndex === -1) {
+    newIndex = (0, _utils2.findSearchIndex)(tr.selection.from, newMatches);
+  }
+  var newSelectedMatch = newMatches[newIndex];
+  decorationSet = (0, _utils2.removeMatchesFromSet)(decorationSet, [selectedMatch, newSelectedMatch], tr.doc);
+  if (newSelectedMatch) {
+    decorationSet = decorationSet.add(tr.doc, (0, _utils2.createDecorations)(0, [newSelectedMatch]));
+  }
+  return _objectSpread(_objectSpread({}, pluginState), {}, {
+    matches: newMatches,
+    index: newIndex,
+    decorationSet: decorationSet
+  });
+};
+var _pluginFactory = (0, _utils.pluginFactory)(_pluginKey.findReplacePluginKey, (0, _reducer.default)(function () {
+    return _main.initialState;
+  }), {
+    onDocChanged: handleDocChanged
+  }),
+  createCommand = exports.createCommand = _pluginFactory.createCommand,
+  getPluginState = exports.getPluginState = _pluginFactory.getPluginState,
+  createPluginState = exports.createPluginState = _pluginFactory.createPluginState;

package/dist/cjs/pm-plugins/plugin-key.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findReplacePluginKey = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var findReplacePluginKey = exports.findReplacePluginKey = new _state.PluginKey('findReplace');

package/dist/cjs/reducer.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _actions = require("./actions");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var reducer = function reducer(getInitialState) {
+  return function (state, action) {
+    switch (action.type) {
+      case _actions.FindReplaceActionTypes.ACTIVATE:
+      case _actions.FindReplaceActionTypes.FIND:
+        return _objectSpread(_objectSpread({}, state), {}, {
+          isActive: true,
+          shouldFocus: action.type === _actions.FindReplaceActionTypes.ACTIVATE,
+          findText: action.findText !== undefined ? action.findText : state.findText,
+          matches: action.matches || state.matches,
+          index: action.index !== undefined ? action.index : state.index
+        });
+      case _actions.FindReplaceActionTypes.UPDATE_DECORATIONS:
+        return _objectSpread(_objectSpread({}, state), {}, {
+          decorationSet: action.decorationSet
+        });
+      case _actions.FindReplaceActionTypes.FIND_NEXT:
+        return _objectSpread(_objectSpread({}, state), {}, {
+          index: action.index,
+          decorationSet: action.decorationSet
+        });
+      case _actions.FindReplaceActionTypes.FIND_PREVIOUS:
+        return _objectSpread(_objectSpread({}, state), {}, {
+          index: action.index,
+          decorationSet: action.decorationSet
+        });
+      case _actions.FindReplaceActionTypes.REPLACE:
+      case _actions.FindReplaceActionTypes.REPLACE_ALL:
+        return _objectSpread(_objectSpread({}, state), {}, {
+          replaceText: action.replaceText,
+          decorationSet: action.decorationSet,
+          matches: action.matches,
+          index: action.index
+        });
+      case _actions.FindReplaceActionTypes.CANCEL:
+        return getInitialState();
+      case _actions.FindReplaceActionTypes.BLUR:
+        return _objectSpread(_objectSpread({}, state), {}, {
+          shouldFocus: false
+        });
+      case _actions.FindReplaceActionTypes.TOGGLE_MATCH_CASE:
+        return _objectSpread(_objectSpread({}, state), {}, {
+          shouldMatchCase: !state.shouldMatchCase
+        });
+      default:
+        return state;
+    }
+  };
+};
+var _default = exports.default = reducer;

package/dist/cjs/styles.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectedSearchMatchClass = exports.searchMatchClass = exports.findReplaceStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _templateObject;
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4290
+var searchMatchClass = exports.searchMatchClass = 'search-match';
+var selectedSearchMatchClass = exports.selectedSearchMatchClass = 'selected-search-match';
+var findReplaceStyles = exports.findReplaceStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background-color: ", ";\n  }\n\n  .", " {\n    background-color: ", ";\n    color: white;\n  }\n"])), searchMatchClass, _colors.B75, selectedSearchMatchClass, _colors.B200);

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/Find.js

@@ -0,0 +1,309 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FIND_DEBOUNCE_MS = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _close = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/close"));
+var _keyboard = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji/keyboard"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-down"));
+var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-up"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _FindReplaceTooltipButton = require("./FindReplaceTooltipButton");
+var _styles = require("./styles");
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */ /** @jsx jsx */
+var FIND_DEBOUNCE_MS = exports.FIND_DEBOUNCE_MS = 100;
+var messages = (0, _reactIntlNext.defineMessages)({
+  find: {
+    id: 'fabric.editor.find',
+    defaultMessage: 'Find',
+    description: 'The word or phrase to search for on the document'
+  },
+  matchCase: {
+    id: 'fabric.editor.matchCase',
+    defaultMessage: 'Match case',
+    description: 'Toggle whether should also match case when searching for text'
+  },
+  findNext: {
+    id: 'fabric.editor.findNext',
+    defaultMessage: 'Find next',
+    description: 'Locate the next occurrence of the word or phrase that was searched for'
+  },
+  findPrevious: {
+    id: 'fabric.editor.findPrevious',
+    defaultMessage: 'Find previous',
+    description: 'Locate the previous occurrence of the word or phrase that was searched for'
+  },
+  closeFindReplaceDialog: {
+    id: 'fabric.editor.closeFindReplaceDialog',
+    defaultMessage: 'Close',
+    description: 'Cancel search and close the "Find and Replace" dialog'
+  },
+  noResultsFound: {
+    id: 'fabric.editor.noResultsFound',
+    defaultMessage: 'No results',
+    description: 'No matches were found for the word or phrase that was searched for'
+  },
+  resultsCount: {
+    id: 'fabric.editor.resultsCount',
+    description: 'Text for selected search match position and total results count',
+    defaultMessage: '{selectedMatchPosition} of {totalResultsCount}'
+  }
+});
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var Find = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(Find, _React$Component);
+  var _super = _createSuper(Find);
+  function Find(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, Find);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "findTextfieldRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isComposing", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "syncFindText", function (onSynced) {
+      var _this$state;
+      // If the external prop findText changes and we aren't in a composition we should update to
+      // use the external prop value.
+      //
+      // An example of where this may happen is when a find occurs through the user selecting some text
+      // and pressing Mod-f.
+      if (!_this.isComposing && _this.props.findText !== ((_this$state = _this.state) === null || _this$state === void 0 ? void 0 : _this$state.localFindText)) {
+        _this.updateFindValue(_this.props.findText || '', onSynced);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusFindTextfield", function () {
+      var input = _this.findTextfieldRef.current;
+      if (_this.props.shouldFocus && input) {
+        input.select();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFindChange", function (event) {
+      _this.updateFindValue(event.target.value);
+    });
+    // debounce (vs throttle) to not block typing inside find input while onFind runs
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "debouncedFind", (0, _debounce.default)(function (value) {
+      _this.props.onFind(value);
+    }, FIND_DEBOUNCE_MS));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateFindValue", function (value, onSynced) {
+      _this.setState({
+        localFindText: value
+      }, function () {
+        if (_this.isComposing) {
+          return;
+        }
+        onSynced && onSynced();
+        _this.debouncedFind(value);
+      });
+    });
+    // throtlle between animation frames gives better experience on Enter compared to arbitrary value
+    // it adjusts based on performance (and document size)
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFindKeyDownThrottled", (0, _rafSchd.default)(function (event) {
+      if (event.key === 'Enter') {
+        if (event.shiftKey) {
+          _this.props.onFindPrev({
+            triggerMethod: _analytics.TRIGGER_METHOD.KEYBOARD
+          });
+        } else {
+          _this.props.onFindNext({
+            triggerMethod: _analytics.TRIGGER_METHOD.KEYBOARD
+          });
+        }
+      } else if (event.key === 'ArrowDown') {
+        // we want to move focus between find & replace texfields when user hits up/down arrows
+        _this.props.onArrowDown();
+      }
+    }));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFindKeyDown", function (event) {
+      if (_this.isComposing) {
+        return;
+      }
+      event.persist();
+      _this.handleFindKeyDownThrottled(event);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFindKeyUp", function () {
+      _this.handleFindKeyDownThrottled.cancel();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFindNextClick", function (ref) {
+      if (_this.isComposing) {
+        return;
+      }
+      _this.props.onFindNext({
+        triggerMethod: _analytics.TRIGGER_METHOD.BUTTON
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFindPrevClick", function (ref) {
+      if (_this.isComposing) {
+        return;
+      }
+      _this.props.onFindPrev({
+        triggerMethod: _analytics.TRIGGER_METHOD.BUTTON
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCompositionStart", function () {
+      _this.isComposing = true;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCompositionEnd", function (event) {
+      _this.isComposing = false;
+      // type for React.CompositionEvent doesn't set type for target correctly
+      _this.updateFindValue(event.target.value);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "clearSearch", function () {
+      _this.props.onCancel({
+        triggerMethod: _analytics.TRIGGER_METHOD.BUTTON
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMatchCaseClick", function (buttonRef) {
+      if (_this.props.allowMatchCase && _this.props.onToggleMatchCase) {
+        _this.props.onToggleMatchCase();
+        _this.props.onFind(_this.props.findText);
+      }
+    });
+    var formatMessage = props.intl.formatMessage;
+    _this.find = formatMessage(messages.find);
+    _this.closeFindReplaceDialog = formatMessage(messages.closeFindReplaceDialog);
+    _this.noResultsFound = formatMessage(messages.noResultsFound);
+    _this.findNext = formatMessage(messages.findNext);
+    _this.findPrevious = formatMessage(messages.findPrevious);
+    _this.matchCase = formatMessage(messages.matchCase);
+    _this.matchCaseIcon = (0, _react2.jsx)(_keyboard.default, {
+      label: _this.matchCase
+    });
+    _this.findNextIcon = (0, _react2.jsx)(_chevronDown.default, {
+      label: _this.findNext
+    });
+    _this.findPrevIcon = (0, _react2.jsx)(_chevronUp.default, {
+      label: _this.findPrevious
+    });
+    _this.closeIcon = (0, _react2.jsx)(_close.default, {
+      label: _this.closeFindReplaceDialog
+    });
+
+    // We locally manage the value of the input inside this component in order to support compositions.
+    // This requires some additional work inside componentDidUpdate to ensure we support changes that
+    // occur to this value which do not originate from this component.
+    _this.state = {
+      localFindText: ''
+    };
+    return _this;
+  }
+  (0, _createClass2.default)(Find, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      this.props.onFindTextfieldRefSet(this.findTextfieldRef);
+
+      // focus initially on dialog mount if there is no find text provided
+      if (!this.props.findText) {
+        this.focusFindTextfield();
+      }
+      this.syncFindText(function () {
+        // focus after input is synced if find text provided
+        if (_this2.props.findText) {
+          _this2.focusFindTextfield();
+        }
+      });
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this3 = this;
+      // focus on update if find text did not change
+      if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace')) {
+        var _this$state2;
+        if (this.props.findText === ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.localFindText)) {
+          this.focusFindTextfield();
+        }
+        if (this.props.findText !== prevProps.findText) {
+          this.syncFindText(function () {
+            // focus after input is synced if find text provided
+            if (_this3.props.findText) {
+              _this3.focusFindTextfield();
+            }
+          });
+        }
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.debouncedFind.cancel();
+      this.handleFindKeyDownThrottled.cancel();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        findText = _this$props.findText,
+        count = _this$props.count,
+        allowMatchCase = _this$props.allowMatchCase,
+        shouldMatchCase = _this$props.shouldMatchCase,
+        formatMessage = _this$props.intl.formatMessage;
+      var resultsCount = formatMessage(messages.resultsCount, {
+        selectedMatchPosition: count.index + 1,
+        totalResultsCount: count.total
+      });
+      return (0, _react2.jsx)("div", {
+        css: _styles.sectionWrapperStyles
+      }, (0, _react2.jsx)(_textfield.default, {
+        name: "find",
+        appearance: "none",
+        placeholder: this.find,
+        value: this.state.localFindText,
+        ref: this.findTextfieldRef,
+        autoComplete: "off",
+        onChange: this.handleFindChange,
+        onKeyDown: this.handleFindKeyDown,
+        onKeyUp: this.handleFindKeyUp,
+        onBlur: this.props.onFindBlur,
+        onCompositionStart: this.handleCompositionStart,
+        onCompositionEnd: this.handleCompositionEnd
+      }), (0, _react2.jsx)("div", {
+        css: _styles.countWrapperStyles,
+        "aria-live": "polite"
+      }, findText && (0, _react2.jsx)("span", {
+        "data-testid": "textfield-count",
+        css: _styles.countStyles
+      }, count.total === 0 ? this.noResultsFound : resultsCount)), allowMatchCase && (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+        title: this.matchCase,
+        icon: this.matchCaseIcon,
+        onClick: this.handleMatchCaseClick,
+        isPressed: shouldMatchCase
+      }), (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+        title: this.findNext,
+        icon: this.findNextIcon,
+        keymapDescription: 'Enter',
+        onClick: this.handleFindNextClick,
+        disabled: count.total <= 1
+      }), (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+        title: this.findPrevious,
+        icon: this.findPrevIcon,
+        keymapDescription: 'Shift Enter',
+        onClick: this.handleFindPrevClick,
+        disabled: count.total <= 1
+      }), (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+        title: this.closeFindReplaceDialog,
+        icon: this.closeIcon,
+        keymapDescription: 'Escape',
+        onClick: this.clearSearch
+      }));
+    }
+  }]);
+  return Find;
+}(_react.default.Component);
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(Find);