@atlaskit/editor-plugin-find-replace 0.1.0

package/dist/cjs/ui/FindReplace.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 _Find = _interopRequireDefault(require("./Find"));
+var _Replace = _interopRequireDefault(require("./Replace"));
+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 */ /* eslint-disable @atlaskit/design-system/prefer-primitives */ /** @jsx jsx */
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(FindReplace, _React$PureComponent);
+  var _super = _createSuper(FindReplace);
+  function FindReplace() {
+    var _this;
+    (0, _classCallCheck2.default)(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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "findTextfield", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "replaceTextfield", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setFindTextfieldRef", function (findTextfieldRef) {
+      _this.findTextfield = findTextfieldRef.current;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setReplaceTextfieldRef", function (replaceTextfieldRef) {
+      _this.replaceTextfield = replaceTextfieldRef.current;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setFocusToFind", function () {
+      if (_this.findTextfield) {
+        _this.findTextfield.focus();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setFocusToReplace", function () {
+      if (_this.replaceTextfield) {
+        _this.replaceTextfield.focus();
+      }
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(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 (0, _react2.jsx)("div", {
+        css: _styles.wrapperStyles
+      }, (0, _react2.jsx)(_Find.default, {
+        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
+      }), (0, _react2.jsx)("hr", {
+        css: _styles.ruleStyles,
+        id: "replace-hr-element"
+      }), (0, _react2.jsx)(_Replace.default, {
+        canReplace: count.total > 0,
+        replaceText: replaceText,
+        onReplace: onReplace,
+        onReplaceAll: onReplaceAll,
+        onReplaceTextfieldRefSet: this.setReplaceTextfieldRef,
+        onArrowUp: this.setFocusToFind,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent
+      }));
+    }
+  }]);
+  return FindReplace;
+}(_react.default.PureComponent);
+var _default = exports.default = FindReplace;

package/dist/cjs/ui/FindReplaceToolbarButton.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
+var _FindReplace = _interopRequireDefault(require("./FindReplace"));
+var _templateObject, _templateObject2, _templateObject3;
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
+/** @jsx jsx */
+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; } }
+var toolbarButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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)", _editorSharedStyles.akEditorMobileMaxWidth);
+var toolbarButtonWrapperFullWith = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n"])));
+var wrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+var messages = (0, _reactIntlNext.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) {
+  (0, _inherits2.default)(FindReplaceToolbarButton, _React$PureComponent);
+  var _super = _createSuper(FindReplaceToolbarButton);
+  function FindReplaceToolbarButton() {
+    var _this;
+    (0, _classCallCheck2.default)(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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleOpen", function () {
+      if (_this.props.isActive) {
+        _this.props.onCancel({
+          triggerMethod: _analytics.TRIGGER_METHOD.TOOLBAR
+        });
+      } else {
+        _this.props.onActivate();
+      }
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(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 = _editorSharedStyles.akEditorFloatingPanelZIndex - 1;
+      var keymap = (0, _keymaps.findKeymapByDescription)('Find');
+      return (0, _react2.jsx)("div", {
+        css: [toolbarButtonWrapper, takeFullWidth && toolbarButtonWrapperFullWith]
+      }, (0, _react2.jsx)(_uiMenu.Dropdown, {
+        mountTo: popupsMountPoint,
+        boundariesElement: popupsBoundariesElement,
+        scrollableElement: popupsScrollableElement,
+        isOpen: isActive,
+        handleEscapeKeydown: function handleEscapeKeydown() {
+          if (isActive) {
+            _this2.props.onCancel({
+              triggerMethod: _analytics.TRIGGER_METHOD.KEYBOARD
+            });
+          }
+        },
+        fitWidth: 352,
+        zIndex: stackBelowOtherEditorFloatingPanels,
+        arrowKeyNavigationProviderOptions: {
+          type: _uiMenu.ArrowKeyNavigationType.MENU,
+          disableArrowKeyNavigation: true
+        },
+        trigger: (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+          buttonId: _uiMenu.TOOLBAR_BUTTON.FIND_REPLACE,
+          spacing: isReducedSpacing ? 'none' : 'default',
+          selected: isActive,
+          title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
+            description: title,
+            keymap: keymap
+          }),
+          iconBefore: (0, _react2.jsx)(_search.default, {
+            label: title
+          }),
+          onClick: this.toggleOpen,
+          "aria-expanded": isActive,
+          "aria-haspopup": true,
+          "aria-label": keymap ? (0, _keymaps.tooltip)(keymap, title) : title,
+          "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(keymap)
+        })
+      }, (0, _react2.jsx)("div", {
+        css: wrapper
+      }, (0, _react2.jsx)(_FindReplace.default, (0, _extends2.default)({
+        findText: findText,
+        replaceText: replaceText,
+        count: {
+          index: index,
+          total: numMatches
+        }
+      }, this.props)))));
+    }
+  }]);
+  return FindReplaceToolbarButton;
+}(_react.default.PureComponent);
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(FindReplaceToolbarButton);

package/dist/cjs/ui/FindReplaceTooltipButton.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FindReplaceTooltipButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+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 _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+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; }
+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-next-line @repo/internal/react/no-class-components
+var FindReplaceTooltipButton = exports.FindReplaceTooltipButton = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(FindReplaceTooltipButton, _React$PureComponent);
+  var _super = _createSuper(FindReplaceTooltipButton);
+  function FindReplaceTooltipButton() {
+    var _this;
+    (0, _classCallCheck2.default)(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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "buttonRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function () {
+      _this.props.onClick(_this.buttonRef);
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(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.default.createElement(_tooltip.default, {
+        content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+          description: title,
+          keymap: (0, _keymaps.findKeymapByDescription)(keymapDescription)
+        }),
+        hideTooltipOnClick: true,
+        position: 'top'
+      }, /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({
+        label: title,
+        appearance: "subtle",
+        testId: title,
+        ref: this.buttonRef,
+        iconBefore: icon,
+        isDisabled: disabled,
+        onClick: this.handleClick,
+        isSelected: isPressed,
+        shouldFitContainer: true
+      }, pressedProps)));
+    }
+  }]);
+  return FindReplaceTooltipButton;
+}(_react.default.PureComponent);
+(0, _defineProperty2.default)(FindReplaceTooltipButton, "defaultProps", {
+  keymapDescription: 'no-keymap'
+});

package/dist/cjs/ui/Replace.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 _reactIntlNext = require("react-intl-next");
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+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 messages = (0, _reactIntlNext.defineMessages)({
+  replaceWith: {
+    id: 'fabric.editor.replaceWith',
+    defaultMessage: 'Replace with',
+    description: 'The value that will replace the word or phrase that was searched for'
+  },
+  replace: {
+    id: 'fabric.editor.replace',
+    defaultMessage: 'Replace',
+    description: 'Replace only the currently selected instance of the word or phrase'
+  },
+  replaceAll: {
+    id: 'fabric.editor.replaceAll',
+    defaultMessage: 'Replace all',
+    description: 'Replace all instances of the word or phrase throughout the entire document'
+  }
+});
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var Replace = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(Replace, _React$PureComponent);
+  var _super = _createSuper(Replace);
+  function Replace(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, Replace);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "replaceTextfieldRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "skipWhileComposing", function (fn) {
+      if (_this.state.isComposing) {
+        return;
+      }
+      fn();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleReplaceClick", function () {
+      return _this.skipWhileComposing(function () {
+        _this.props.onReplace({
+          triggerMethod: _analytics.TRIGGER_METHOD.BUTTON,
+          replaceText: _this.state.replaceText
+        });
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleReplaceChange", function (event) {
+      return _this.skipWhileComposing(function () {
+        _this.updateReplaceValue(event.target.value);
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateReplaceValue", function (replaceText) {
+      var dispatchAnalyticsEvent = _this.props.dispatchAnalyticsEvent;
+      if (dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent({
+          eventType: _analytics.EVENT_TYPE.TRACK,
+          action: _analytics.ACTION.CHANGED_REPLACEMENT_TEXT,
+          actionSubject: _analytics.ACTION_SUBJECT.FIND_REPLACE_DIALOG
+        });
+      }
+      _this.setState({
+        replaceText: replaceText
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleReplaceKeyDown", function (event) {
+      return _this.skipWhileComposing(function () {
+        if (event.key === 'Enter') {
+          _this.props.onReplace({
+            triggerMethod: _analytics.TRIGGER_METHOD.KEYBOARD,
+            replaceText: _this.state.replaceText
+          });
+        } else if (event.key === 'ArrowUp') {
+          // we want to move focus between find & replace texfields when user hits up/down arrows
+          _this.props.onArrowUp();
+        }
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleReplaceAllClick", function () {
+      return _this.skipWhileComposing(function () {
+        _this.props.onReplaceAll({
+          replaceText: _this.state.replaceText
+        });
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCompositionStart", function () {
+      _this.setState({
+        isComposing: true
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCompositionEnd", function (event) {
+      _this.setState({
+        isComposing: false
+      });
+      // type for React.CompositionEvent doesn't set type for target correctly
+      _this.updateReplaceValue(event.target.value);
+    });
+    var _replaceText = props.replaceText,
+      formatMessage = props.intl.formatMessage;
+    _this.state = {
+      replaceText: _replaceText || '',
+      isComposing: false
+    };
+    _this.replaceWith = formatMessage(messages.replaceWith);
+    _this.replace = formatMessage(messages.replace);
+    _this.replaceAll = formatMessage(messages.replaceAll);
+    return _this;
+  }
+  (0, _createClass2.default)(Replace, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.onReplaceTextfieldRefSet(this.replaceTextfieldRef);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(_ref) {
+      var prevReplaceText = _ref.replaceText;
+      var replaceText = this.props.replaceText;
+      if (replaceText && replaceText !== prevReplaceText) {
+        this.setState({
+          replaceText: replaceText,
+          isComposing: false
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var replaceText = this.state.replaceText;
+      var canReplace = this.props.canReplace;
+      return (0, _react2.jsx)("div", {
+        css: _styles.sectionWrapperStyles
+      }, (0, _react2.jsx)(_textfield.default, {
+        name: "replace",
+        appearance: "none",
+        placeholder: this.replaceWith,
+        defaultValue: replaceText,
+        ref: this.replaceTextfieldRef,
+        autoComplete: "off",
+        onChange: this.handleReplaceChange,
+        onKeyDown: this.handleReplaceKeyDown,
+        onCompositionStart: this.handleCompositionStart,
+        onCompositionEnd: this.handleCompositionEnd
+      }), (0, _react2.jsx)(_standardButton.default, {
+        css: _styles.replaceSectionButtonStyles,
+        testId: this.replace,
+        onClick: this.handleReplaceClick,
+        isDisabled: !canReplace
+      }, this.replace), (0, _react2.jsx)(_standardButton.default, {
+        css: _styles.replaceSectionButtonStyles,
+        testId: this.replaceAll,
+        onClick: this.handleReplaceAllClick,
+        isDisabled: !canReplace
+      }, this.replaceAll));
+    }
+  }]);
+  return Replace;
+}(_react.default.PureComponent);
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(Replace);

package/dist/cjs/ui/styles.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapperStyles = exports.sectionWrapperStyles = exports.ruleStyles = exports.replaceSectionButtonStyles = exports.countWrapperStyles = exports.countStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _colors = require("@atlaskit/theme/colors");
+var _templateObject;
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/* eslint-disable @repo/internal/styles/no-exported-styles */
+/** @jsx jsx */
+var replaceSectionButtonStyles = exports.replaceSectionButtonStyles = (0, _react.css)({
+  marginLeft: "var(--ds-space-050, 4px)"
+});
+var ruleStyles = exports.ruleStyles = (0, _react.css)({
+  width: '100%',
+  border: 'none',
+  backgroundColor: "".concat("var(--ds-border, ".concat(_colors.N30A, ")")),
+  margin: "var(--ds-space-050, 4px)".concat(" 0px"),
+  height: '1px',
+  borderRadius: '1px'
+});
+var wrapperStyles = exports.wrapperStyles = (0, _react.css)({
+  display: 'flex',
+  flexDirection: 'column',
+  '> *:not(#replace-hr-element)': {
+    margin: "0px ".concat("var(--ds-space-050, 4px)")
+  }
+});
+var sectionWrapperStyles = exports.sectionWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n\n  & > * {\n    display: inline-flex;\n    height: 32px;\n    flex: 0 0 auto;\n  }\n\n  & > [data-ds--text-field--container] {\n    display: flex;\n    flex: 1 1 auto;\n  }\n"])));
+var countStyles = exports.countStyles = (0, _react.css)({
+  color: "".concat("var(--ds-text-subtlest, ".concat(_colors.N60, ")")),
+  fontSize: "".concat((0, _editorSharedStyles.relativeFontSizeToBase16)(12)),
+  flex: '0 0 auto',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginLeft: "var(--ds-space-050, 4px)",
+  marginRight: "var(--ds-space-100, 8px)"
+});
+var countWrapperStyles = exports.countWrapperStyles = (0, _react.css)({
+  alignItems: 'center'
+});

package/dist/cjs/utils/array.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findUniqueItemsIn = findUniqueItemsIn;
+function findUniqueItemsIn(findIn, checkWith, comparator) {
+  return findIn.filter(function (firstItem) {
+    return checkWith.findIndex(function (secondItem) {
+      return comparator ? comparator(firstItem, secondItem) : firstItem === secondItem;
+    }) === -1;
+  });
+}