@atlaskit/editor-plugin-find-replace 0.1.0

package/dist/esm/ui/Find.js

@@ -0,0 +1,304 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 */
+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 var FIND_DEBOUNCE_MS = 100;
+var 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
+var Find = /*#__PURE__*/function (_React$Component) {
+  _inherits(Find, _React$Component);
+  var _super = _createSuper(Find);
+  function Find(props) {
+    var _this;
+    _classCallCheck(this, Find);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "findTextfieldRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "isComposing", false);
+    _defineProperty(_assertThisInitialized(_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);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "focusFindTextfield", function () {
+      var input = _this.findTextfieldRef.current;
+      if (_this.props.shouldFocus && input) {
+        input.select();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleFindChange", function (event) {
+      _this.updateFindValue(event.target.value);
+    });
+    // debounce (vs throttle) to not block typing inside find input while onFind runs
+    _defineProperty(_assertThisInitialized(_this), "debouncedFind", debounce(function (value) {
+      _this.props.onFind(value);
+    }, FIND_DEBOUNCE_MS));
+    _defineProperty(_assertThisInitialized(_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)
+    _defineProperty(_assertThisInitialized(_this), "handleFindKeyDownThrottled", rafSchd(function (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(_assertThisInitialized(_this), "handleFindKeyDown", function (event) {
+      if (_this.isComposing) {
+        return;
+      }
+      event.persist();
+      _this.handleFindKeyDownThrottled(event);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleFindKeyUp", function () {
+      _this.handleFindKeyDownThrottled.cancel();
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleFindNextClick", function (ref) {
+      if (_this.isComposing) {
+        return;
+      }
+      _this.props.onFindNext({
+        triggerMethod: TRIGGER_METHOD.BUTTON
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleFindPrevClick", function (ref) {
+      if (_this.isComposing) {
+        return;
+      }
+      _this.props.onFindPrev({
+        triggerMethod: TRIGGER_METHOD.BUTTON
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleCompositionStart", function () {
+      _this.isComposing = true;
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleCompositionEnd", function (event) {
+      _this.isComposing = false;
+      // type for React.CompositionEvent doesn't set type for target correctly
+      _this.updateFindValue(event.target.value);
+    });
+    _defineProperty(_assertThisInitialized(_this), "clearSearch", function () {
+      _this.props.onCancel({
+        triggerMethod: TRIGGER_METHOD.BUTTON
+      });
+    });
+    _defineProperty(_assertThisInitialized(_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 = 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: ''
+    };
+    return _this;
+  }
+  _createClass(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 (!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 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
+      }));
+    }
+  }]);
+  return Find;
+}(React.Component);
+export default injectIntl(Find);

package/dist/esm/ui/FindReplace.js

@@ -0,0 +1,100 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 */
+/* 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
+var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(FindReplace, _React$PureComponent);
+  var _super = _createSuper(FindReplace);
+  function FindReplace() {
+    var _this;
+    _classCallCheck(this, FindReplace);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "findTextfield", null);
+    _defineProperty(_assertThisInitialized(_this), "replaceTextfield", null);
+    _defineProperty(_assertThisInitialized(_this), "setFindTextfieldRef", function (findTextfieldRef) {
+      _this.findTextfield = findTextfieldRef.current;
+    });
+    _defineProperty(_assertThisInitialized(_this), "setReplaceTextfieldRef", function (replaceTextfieldRef) {
+      _this.replaceTextfield = replaceTextfieldRef.current;
+    });
+    _defineProperty(_assertThisInitialized(_this), "setFocusToFind", function () {
+      if (_this.findTextfield) {
+        _this.findTextfield.focus();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "setFocusToReplace", function () {
+      if (_this.replaceTextfield) {
+        _this.replaceTextfield.focus();
+      }
+    });
+    return _this;
+  }
+  _createClass(FindReplace, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        findText = _this$props.findText,
+        count = _this$props.count,
+        shouldFocus = _this$props.shouldFocus,
+        onFind = _this$props.onFind,
+        onFindBlur = _this$props.onFindBlur,
+        onFindNext = _this$props.onFindNext,
+        onFindPrev = _this$props.onFindPrev,
+        onCancel = _this$props.onCancel,
+        replaceText = _this$props.replaceText,
+        onReplace = _this$props.onReplace,
+        onReplaceAll = _this$props.onReplaceAll,
+        dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent,
+        allowMatchCase = _this$props.allowMatchCase,
+        shouldMatchCase = _this$props.shouldMatchCase,
+        onToggleMatchCase = _this$props.onToggleMatchCase;
+      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
+      }));
+    }
+  }]);
+  return FindReplace;
+}(React.PureComponent);
+export default FindReplace;

package/dist/esm/ui/FindReplaceToolbarButton.js

@@ -0,0 +1,126 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 */
+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';
+var toolbarButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1 1 auto;\n  flex-grow: 0;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 0 ", ";\n  @media (max-width: ", "px) {\n    justify-content: center;\n    padding: 0;\n  }\n"])), "var(--ds-space-100, 8px)", akEditorMobileMaxWidth);
+var toolbarButtonWrapperFullWith = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n"])));
+var wrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+var 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
+var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(FindReplaceToolbarButton, _React$PureComponent);
+  var _super = _createSuper(FindReplaceToolbarButton);
+  function FindReplaceToolbarButton() {
+    var _this;
+    _classCallCheck(this, FindReplaceToolbarButton);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "toggleOpen", function () {
+      if (_this.props.isActive) {
+        _this.props.onCancel({
+          triggerMethod: TRIGGER_METHOD.TOOLBAR
+        });
+      } else {
+        _this.props.onActivate();
+      }
+    });
+    return _this;
+  }
+  _createClass(FindReplaceToolbarButton, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        popupsMountPoint = _this$props.popupsMountPoint,
+        popupsBoundariesElement = _this$props.popupsBoundariesElement,
+        popupsScrollableElement = _this$props.popupsScrollableElement,
+        isReducedSpacing = _this$props.isReducedSpacing,
+        findText = _this$props.findText,
+        replaceText = _this$props.replaceText,
+        isActive = _this$props.isActive,
+        index = _this$props.index,
+        numMatches = _this$props.numMatches,
+        formatMessage = _this$props.intl.formatMessage,
+        takeFullWidth = _this$props.takeFullWidth;
+      var title = formatMessage(messages.findReplaceToolbarButton);
+      var stackBelowOtherEditorFloatingPanels = akEditorFloatingPanelZIndex - 1;
+      var keymap = findKeymapByDescription('Find');
+      return jsx("div", {
+        css: [toolbarButtonWrapper, takeFullWidth && toolbarButtonWrapperFullWith]
+      }, jsx(Dropdown, {
+        mountTo: popupsMountPoint,
+        boundariesElement: popupsBoundariesElement,
+        scrollableElement: popupsScrollableElement,
+        isOpen: isActive,
+        handleEscapeKeydown: function handleEscapeKeydown() {
+          if (isActive) {
+            _this2.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: index,
+          total: numMatches
+        }
+      }, this.props)))));
+    }
+  }]);
+  return FindReplaceToolbarButton;
+}(React.PureComponent);
+export default injectIntl(FindReplaceToolbarButton);

package/dist/esm/ui/FindReplaceTooltipButton.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+import React from 'react';
+import Button from '@atlaskit/button/standard-button';
+import { findKeymapByDescription, ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import Tooltip from '@atlaskit/tooltip';
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export var FindReplaceTooltipButton = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(FindReplaceTooltipButton, _React$PureComponent);
+  var _super = _createSuper(FindReplaceTooltipButton);
+  function FindReplaceTooltipButton() {
+    var _this;
+    _classCallCheck(this, FindReplaceTooltipButton);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "buttonRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
+      _this.props.onClick(_this.buttonRef);
+    });
+    return _this;
+  }
+  _createClass(FindReplaceTooltipButton, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        title = _this$props.title,
+        icon = _this$props.icon,
+        keymapDescription = _this$props.keymapDescription,
+        disabled = _this$props.disabled,
+        isPressed = _this$props.isPressed;
+      var pressedProps = _objectSpread({}, typeof isPressed === 'boolean' && {
+        'aria-pressed': isPressed
+      });
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        content: /*#__PURE__*/React.createElement(ToolTipContent, {
+          description: title,
+          keymap: findKeymapByDescription(keymapDescription)
+        }),
+        hideTooltipOnClick: true,
+        position: 'top'
+      }, /*#__PURE__*/React.createElement(Button, _extends({
+        label: title,
+        appearance: "subtle",
+        testId: title,
+        ref: this.buttonRef,
+        iconBefore: icon,
+        isDisabled: disabled,
+        onClick: this.handleClick,
+        isSelected: isPressed,
+        shouldFitContainer: true
+      }, pressedProps)));
+    }
+  }]);
+  return FindReplaceTooltipButton;
+}(React.PureComponent);
+_defineProperty(FindReplaceTooltipButton, "defaultProps", {
+  keymapDescription: 'no-keymap'
+});