@atlaskit/editor-plugin-find-replace 0.1.0

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

@@ -0,0 +1,91 @@
+import { pluginFactory, stepHasSlice } from '@atlaskit/editor-common/utils';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import reducer from '../reducer';
+import { createDecorations, findDecorationFromMatch, findMatches, findSearchIndex, isMatchAffectedByStep, removeDecorationsFromSet, removeMatchesFromSet } from '../utils';
+import { findUniqueItemsIn } from '../utils/array'; // TODO: move into index export
+
+import { initialState } from './main';
+import { findReplacePluginKey } from './plugin-key';
+const handleDocChanged = (tr, pluginState) => {
+  const {
+    isActive,
+    findText
+  } = pluginState;
+  if (!isActive || !findText) {
+    return pluginState;
+  }
+  if (!tr.steps.find(stepHasSlice)) {
+    return pluginState;
+  }
+  let {
+    index,
+    decorationSet,
+    matches,
+    shouldMatchCase
+  } = pluginState;
+  const newMatches = findMatches(tr.doc, findText, shouldMatchCase);
+  decorationSet = decorationSet.map(tr.mapping, tr.doc);
+  const numDecorations = decorationSet.find().length;
+  const mappedMatches = matches.map(match => ({
+    start: tr.mapping.map(match.start),
+    end: tr.mapping.map(match.end)
+  }));
+  let matchesToAdd = [];
+  let matchesToDelete = [];
+  if (newMatches.length > 0 && numDecorations === 0) {
+    matchesToAdd = newMatches;
+  } else if (newMatches.length === 0 && numDecorations > 0) {
+    decorationSet = 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(step => {
+      if (stepHasSlice(step)) {
+        // add all matches that are between the affected positions and don't already have
+        // corresponding decorations
+        matchesToAdd = [...matchesToAdd, ...newMatches.filter(match => isMatchAffectedByStep(match, step, tr) && !findDecorationFromMatch(decorationSet, match))];
+
+        // delete any matches that are missing from the newMatches array and have a
+        // corresponding decoration
+        matchesToDelete = [...matchesToDelete, ...findUniqueItemsIn(mappedMatches.filter(match => isMatchAffectedByStep(match, step, tr) && !!findDecorationFromMatch(decorationSet, match)), newMatches, (firstMatch, secondMatch) => firstMatch.start === secondMatch.start && firstMatch.end === secondMatch.end)];
+      }
+    });
+  }
+
+  // update decorations if matches changed following document update
+  if (matchesToDelete.length > 0) {
+    const decorationsToDelete = matchesToDelete.reduce((decorations, match) => [...decorations, ...decorationSet.find(match.start, match.end)], []);
+    decorationSet = removeDecorationsFromSet(decorationSet, decorationsToDelete, tr.doc);
+  }
+  if (matchesToAdd.length > 0) {
+    decorationSet = decorationSet.add(tr.doc, createDecorations(tr.selection.from, matchesToAdd));
+  }
+
+  // update selected match if it has changed
+  let newIndex = index;
+  const selectedMatch = mappedMatches[index];
+  if (selectedMatch) {
+    newIndex = newMatches.findIndex(match => match.start === selectedMatch.start);
+  }
+  if (newIndex === undefined || newIndex === -1) {
+    newIndex = findSearchIndex(tr.selection.from, newMatches);
+  }
+  const newSelectedMatch = newMatches[newIndex];
+  decorationSet = removeMatchesFromSet(decorationSet, [selectedMatch, newSelectedMatch], tr.doc);
+  if (newSelectedMatch) {
+    decorationSet = decorationSet.add(tr.doc, createDecorations(0, [newSelectedMatch]));
+  }
+  return {
+    ...pluginState,
+    matches: newMatches,
+    index: newIndex,
+    decorationSet
+  };
+};
+export const {
+  createCommand,
+  getPluginState,
+  createPluginState
+} = pluginFactory(findReplacePluginKey, reducer(() => initialState), {
+  onDocChanged: handleDocChanged
+});

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

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const findReplacePluginKey = new PluginKey('findReplace');

package/dist/es2019/reducer.js

@@ -0,0 +1,56 @@
+import { FindReplaceActionTypes } from './actions';
+const reducer = getInitialState => (state, action) => {
+  switch (action.type) {
+    case FindReplaceActionTypes.ACTIVATE:
+    case FindReplaceActionTypes.FIND:
+      return {
+        ...state,
+        isActive: true,
+        shouldFocus: action.type === FindReplaceActionTypes.ACTIVATE,
+        findText: action.findText !== undefined ? action.findText : state.findText,
+        matches: action.matches || state.matches,
+        index: action.index !== undefined ? action.index : state.index
+      };
+    case FindReplaceActionTypes.UPDATE_DECORATIONS:
+      return {
+        ...state,
+        decorationSet: action.decorationSet
+      };
+    case FindReplaceActionTypes.FIND_NEXT:
+      return {
+        ...state,
+        index: action.index,
+        decorationSet: action.decorationSet
+      };
+    case FindReplaceActionTypes.FIND_PREVIOUS:
+      return {
+        ...state,
+        index: action.index,
+        decorationSet: action.decorationSet
+      };
+    case FindReplaceActionTypes.REPLACE:
+    case FindReplaceActionTypes.REPLACE_ALL:
+      return {
+        ...state,
+        replaceText: action.replaceText,
+        decorationSet: action.decorationSet,
+        matches: action.matches,
+        index: action.index
+      };
+    case FindReplaceActionTypes.CANCEL:
+      return getInitialState();
+    case FindReplaceActionTypes.BLUR:
+      return {
+        ...state,
+        shouldFocus: false
+      };
+    case FindReplaceActionTypes.TOGGLE_MATCH_CASE:
+      return {
+        ...state,
+        shouldMatchCase: !state.shouldMatchCase
+      };
+    default:
+      return state;
+  }
+};
+export default reducer;

package/dist/es2019/styles.js

@@ -0,0 +1,18 @@
+/* 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
+import { css } from '@emotion/react';
+import { B200, B75 } from '@atlaskit/theme/colors';
+export const searchMatchClass = 'search-match';
+export const selectedSearchMatchClass = 'selected-search-match';
+export const findReplaceStyles = css`
+  .${searchMatchClass} {
+    background-color: ${B75};
+  }
+
+  .${selectedSearchMatchClass} {
+    background-color: ${B200};
+    color: white;
+  }
+`;

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/Find.js

@@ -0,0 +1,286 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import debounce from 'lodash/debounce';
+import rafSchd from 'raf-schd';
+import { defineMessages, injectIntl } from 'react-intl-next';
+import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
+import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
+import MatchCaseIcon from '@atlaskit/icon/glyph/emoji/keyboard';
+import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
+import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import Textfield from '@atlaskit/textfield';
+import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
+import { countStyles, countWrapperStyles, sectionWrapperStyles } from './styles';
+export const FIND_DEBOUNCE_MS = 100;
+const messages = 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
+class Find extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "findTextfieldRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "isComposing", false);
+    _defineProperty(this, "syncFindText", 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);
+      }
+    });
+    _defineProperty(this, "focusFindTextfield", () => {
+      const input = this.findTextfieldRef.current;
+      if (this.props.shouldFocus && input) {
+        input.select();
+      }
+    });
+    _defineProperty(this, "handleFindChange", event => {
+      this.updateFindValue(event.target.value);
+    });
+    // debounce (vs throttle) to not block typing inside find input while onFind runs
+    _defineProperty(this, "debouncedFind", debounce(value => {
+      this.props.onFind(value);
+    }, FIND_DEBOUNCE_MS));
+    _defineProperty(this, "updateFindValue", (value, onSynced) => {
+      this.setState({
+        localFindText: value
+      }, () => {
+        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)
+    _defineProperty(this, "handleFindKeyDownThrottled", rafSchd(event => {
+      if (event.key === 'Enter') {
+        if (event.shiftKey) {
+          this.props.onFindPrev({
+            triggerMethod: TRIGGER_METHOD.KEYBOARD
+          });
+        } else {
+          this.props.onFindNext({
+            triggerMethod: 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();
+      }
+    }));
+    _defineProperty(this, "handleFindKeyDown", event => {
+      if (this.isComposing) {
+        return;
+      }
+      event.persist();
+      this.handleFindKeyDownThrottled(event);
+    });
+    _defineProperty(this, "handleFindKeyUp", () => {
+      this.handleFindKeyDownThrottled.cancel();
+    });
+    _defineProperty(this, "handleFindNextClick", ref => {
+      if (this.isComposing) {
+        return;
+      }
+      this.props.onFindNext({
+        triggerMethod: TRIGGER_METHOD.BUTTON
+      });
+    });
+    _defineProperty(this, "handleFindPrevClick", ref => {
+      if (this.isComposing) {
+        return;
+      }
+      this.props.onFindPrev({
+        triggerMethod: TRIGGER_METHOD.BUTTON
+      });
+    });
+    _defineProperty(this, "handleCompositionStart", () => {
+      this.isComposing = true;
+    });
+    _defineProperty(this, "handleCompositionEnd", event => {
+      this.isComposing = false;
+      // type for React.CompositionEvent doesn't set type for target correctly
+      this.updateFindValue(event.target.value);
+    });
+    _defineProperty(this, "clearSearch", () => {
+      this.props.onCancel({
+        triggerMethod: TRIGGER_METHOD.BUTTON
+      });
+    });
+    _defineProperty(this, "handleMatchCaseClick", buttonRef => {
+      if (this.props.allowMatchCase && this.props.onToggleMatchCase) {
+        this.props.onToggleMatchCase();
+        this.props.onFind(this.props.findText);
+      }
+    });
+    const {
+      intl: {
+        formatMessage
+      }
+    } = props;
+    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 = jsx(MatchCaseIcon, {
+      label: this.matchCase
+    });
+    this.findNextIcon = jsx(ChevronDownIcon, {
+      label: this.findNext
+    });
+    this.findPrevIcon = jsx(ChevronUpIcon, {
+      label: this.findPrevious
+    });
+    this.closeIcon = jsx(EditorCloseIcon, {
+      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: ''
+    };
+  }
+  componentDidMount() {
+    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(() => {
+      // focus after input is synced if find text provided
+      if (this.props.findText) {
+        this.focusFindTextfield();
+      }
+    });
+  }
+  componentDidUpdate(prevProps) {
+    // focus on update if find text did not change
+    if (!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(() => {
+          // focus after input is synced if find text provided
+          if (this.props.findText) {
+            this.focusFindTextfield();
+          }
+        });
+      }
+    }
+  }
+  componentWillUnmount() {
+    this.debouncedFind.cancel();
+    this.handleFindKeyDownThrottled.cancel();
+  }
+  render() {
+    const {
+      findText,
+      count,
+      allowMatchCase,
+      shouldMatchCase,
+      intl: {
+        formatMessage
+      }
+    } = this.props;
+    const resultsCount = formatMessage(messages.resultsCount, {
+      selectedMatchPosition: count.index + 1,
+      totalResultsCount: count.total
+    });
+    return jsx("div", {
+      css: sectionWrapperStyles
+    }, jsx(Textfield, {
+      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
+    }), jsx("div", {
+      css: countWrapperStyles,
+      "aria-live": "polite"
+    }, findText && jsx("span", {
+      "data-testid": "textfield-count",
+      css: countStyles
+    }, count.total === 0 ? this.noResultsFound : resultsCount)), allowMatchCase && jsx(FindReplaceTooltipButton, {
+      title: this.matchCase,
+      icon: this.matchCaseIcon,
+      onClick: this.handleMatchCaseClick,
+      isPressed: shouldMatchCase
+    }), jsx(FindReplaceTooltipButton, {
+      title: this.findNext,
+      icon: this.findNextIcon,
+      keymapDescription: 'Enter',
+      onClick: this.handleFindNextClick,
+      disabled: count.total <= 1
+    }), jsx(FindReplaceTooltipButton, {
+      title: this.findPrevious,
+      icon: this.findPrevIcon,
+      keymapDescription: 'Shift Enter',
+      onClick: this.handleFindPrevClick,
+      disabled: count.total <= 1
+    }), jsx(FindReplaceTooltipButton, {
+      title: this.closeFindReplaceDialog,
+      icon: this.closeIcon,
+      keymapDescription: 'Escape',
+      onClick: this.clearSearch
+    }));
+  }
+}
+export default injectIntl(Find);

package/dist/es2019/ui/FindReplace.js

@@ -0,0 +1,81 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import Find from './Find';
+import Replace from './Replace';
+import { ruleStyles, wrapperStyles } from './styles';
+// eslint-disable-next-line @repo/internal/react/no-class-components
+class FindReplace extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "findTextfield", null);
+    _defineProperty(this, "replaceTextfield", null);
+    _defineProperty(this, "setFindTextfieldRef", findTextfieldRef => {
+      this.findTextfield = findTextfieldRef.current;
+    });
+    _defineProperty(this, "setReplaceTextfieldRef", replaceTextfieldRef => {
+      this.replaceTextfield = replaceTextfieldRef.current;
+    });
+    _defineProperty(this, "setFocusToFind", () => {
+      if (this.findTextfield) {
+        this.findTextfield.focus();
+      }
+    });
+    _defineProperty(this, "setFocusToReplace", () => {
+      if (this.replaceTextfield) {
+        this.replaceTextfield.focus();
+      }
+    });
+  }
+  render() {
+    const {
+      findText,
+      count,
+      shouldFocus,
+      onFind,
+      onFindBlur,
+      onFindNext,
+      onFindPrev,
+      onCancel,
+      replaceText,
+      onReplace,
+      onReplaceAll,
+      dispatchAnalyticsEvent,
+      allowMatchCase,
+      shouldMatchCase,
+      onToggleMatchCase
+    } = this.props;
+    return jsx("div", {
+      css: wrapperStyles
+    }, jsx(Find, {
+      allowMatchCase: allowMatchCase,
+      shouldMatchCase: shouldMatchCase,
+      onToggleMatchCase: onToggleMatchCase,
+      findText: findText,
+      count: count,
+      shouldFocus: shouldFocus,
+      onFind: onFind,
+      onFindBlur: onFindBlur,
+      onFindPrev: onFindPrev,
+      onFindNext: onFindNext,
+      onFindTextfieldRefSet: this.setFindTextfieldRef,
+      onCancel: onCancel,
+      onArrowDown: this.setFocusToReplace
+    }), jsx("hr", {
+      css: ruleStyles,
+      id: "replace-hr-element"
+    }), jsx(Replace, {
+      canReplace: count.total > 0,
+      replaceText: replaceText,
+      onReplace: onReplace,
+      onReplaceAll: onReplaceAll,
+      onReplaceTextfieldRefSet: this.setReplaceTextfieldRef,
+      onArrowUp: this.setFocusToFind,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent
+    }));
+  }
+}
+export default FindReplace;

package/dist/es2019/ui/FindReplaceToolbarButton.js

@@ -0,0 +1,122 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+import { defineMessages, injectIntl } from 'react-intl-next';
+import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
+import { findKeymapByDescription, getAriaKeyshortcuts, tooltip, ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { ArrowKeyNavigationType, Dropdown, TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { akEditorFloatingPanelZIndex, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
+import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
+import FindReplace from './FindReplace';
+const toolbarButtonWrapper = css`
+  display: flex;
+  flex: 1 1 auto;
+  flex-grow: 0;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0 ${"var(--ds-space-100, 8px)"};
+  @media (max-width: ${akEditorMobileMaxWidth}px) {
+    justify-content: center;
+    padding: 0;
+  }
+`;
+const toolbarButtonWrapperFullWith = css`
+  flex-grow: 1;
+`;
+const wrapper = css`
+  display: flex;
+  flex-direction: column;
+`;
+const messages = defineMessages({
+  findReplaceToolbarButton: {
+    id: 'fabric.editor.findReplaceToolbarButton',
+    defaultMessage: 'Find and replace',
+    description: '"Find" highlights all instances of a word or phrase on the document, and "Replace" changes one or all of those instances to something else'
+  }
+});
+// eslint-disable-next-line @repo/internal/react/no-class-components
+class FindReplaceToolbarButton extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "toggleOpen", () => {
+      if (this.props.isActive) {
+        this.props.onCancel({
+          triggerMethod: TRIGGER_METHOD.TOOLBAR
+        });
+      } else {
+        this.props.onActivate();
+      }
+    });
+  }
+  render() {
+    const {
+      popupsMountPoint,
+      popupsBoundariesElement,
+      popupsScrollableElement,
+      isReducedSpacing,
+      findText,
+      replaceText,
+      isActive,
+      index,
+      numMatches,
+      intl: {
+        formatMessage
+      },
+      takeFullWidth
+    } = this.props;
+    const title = formatMessage(messages.findReplaceToolbarButton);
+    const stackBelowOtherEditorFloatingPanels = akEditorFloatingPanelZIndex - 1;
+    const keymap = findKeymapByDescription('Find');
+    return jsx("div", {
+      css: [toolbarButtonWrapper, takeFullWidth && toolbarButtonWrapperFullWith]
+    }, jsx(Dropdown, {
+      mountTo: popupsMountPoint,
+      boundariesElement: popupsBoundariesElement,
+      scrollableElement: popupsScrollableElement,
+      isOpen: isActive,
+      handleEscapeKeydown: () => {
+        if (isActive) {
+          this.props.onCancel({
+            triggerMethod: TRIGGER_METHOD.KEYBOARD
+          });
+        }
+      },
+      fitWidth: 352,
+      zIndex: stackBelowOtherEditorFloatingPanels,
+      arrowKeyNavigationProviderOptions: {
+        type: ArrowKeyNavigationType.MENU,
+        disableArrowKeyNavigation: true
+      },
+      trigger: jsx(ToolbarButton, {
+        buttonId: TOOLBAR_BUTTON.FIND_REPLACE,
+        spacing: isReducedSpacing ? 'none' : 'default',
+        selected: isActive,
+        title: jsx(ToolTipContent, {
+          description: title,
+          keymap: keymap
+        }),
+        iconBefore: jsx(EditorSearchIcon, {
+          label: title
+        }),
+        onClick: this.toggleOpen,
+        "aria-expanded": isActive,
+        "aria-haspopup": true,
+        "aria-label": keymap ? tooltip(keymap, title) : title,
+        "aria-keyshortcuts": getAriaKeyshortcuts(keymap)
+      })
+    }, jsx("div", {
+      css: wrapper
+    }, jsx(FindReplace, _extends({
+      findText: findText,
+      replaceText: replaceText,
+      count: {
+        index,
+        total: numMatches
+      }
+    }, this.props)))));
+  }
+}
+export default injectIntl(FindReplaceToolbarButton);