@atlaskit/editor-plugin-find-replace 21.0.1 → 21.1.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-find-replace
 
+## 21.1.0
+
+### Minor Changes
+
+- [`111eaadd44c1c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/111eaadd44c1c) -
+  EDITOR-8995: Make the editor find dialog usable in live view. The find dialog now accepts an
+  `allowReplace` prop, and hides the replace label, field, replacement count message, both replace
+  buttons and the horizontal rule when it is false. It also names the dialog "Find" instead of "Find
+  and Replace" in that state. The find plugin derives `allowReplace` from the `editorViewMode`
+  shared state, so view mode never offers replace. A new ProseMirror plugin opens the dialog on
+  `Mod-f` in view mode, where no keymap fires, behind the `platform_editor_collapsible_headings`
+  experiment. The `activated` analytics event gains an `editorViewMode` attribute.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 21.0.1
 
 ### Patch Changes

package/dist/cjs/findReplacePlugin.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _types = require("@atlaskit/editor-common/types");
+var _unsafeExpValNoExposure = require("@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
 var _commands = require("./pm-plugins/commands");
@@ -16,6 +17,7 @@ var _commandsWithAnalytics = require("./pm-plugins/commands-with-analytics");
 var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
 var _main = require("./pm-plugins/main");
 var _pluginKey = require("./pm-plugins/plugin-key");
+var _viewModeShortcut = require("./pm-plugins/view-mode-shortcut");
 var _FindReplaceDropDownOrToolbarButtonWithState = _interopRequireDefault(require("./ui/FindReplaceDropDownOrToolbarButtonWithState"));
 var findReplacePlugin = exports.findReplacePlugin = function findReplacePlugin(_ref) {
   var _api$primaryToolbar;
@@ -77,9 +79,17 @@ var findReplacePlugin = exports.findReplacePlugin = function findReplacePlugin(_
         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);
+          return (0, _keymap.default)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 ? void 0 : api.editorViewMode);
         }
       }];
+      if (api !== null && api !== void 0 && api.editorViewMode && (0, _unsafeExpValNoExposure.UNSAFE_expValNoExposure)('platform_editor_collapsible_headings', 'isEnabled', false)) {
+        plugins.push({
+          name: 'findReplaceViewModeShortcut',
+          plugin: function plugin() {
+            return (0, _viewModeShortcut.viewModeShortcutPlugin)(api);
+          }
+        });
+      }
       if ((0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1', {
         exposure: false
       })) {
@@ -138,7 +148,7 @@ var findReplacePlugin = exports.findReplacePlugin = function findReplacePlugin(_
           dispatch = _editorViewRef$curren.dispatch;
         if (api !== null && api !== void 0 && (_api$analytics2 = api.analytics) !== null && _api$analytics2 !== void 0 && _api$analytics2.actions) {
           var _api$analytics3;
-          (0, _commandsWithAnalytics.activateWithAnalytics)(api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions)({
+          (0, _commandsWithAnalytics.activateWithAnalytics)(api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, api === null || api === void 0 ? void 0 : api.editorViewMode)({
             triggerMethod: triggerMethod || _analytics.TRIGGER_METHOD.EXTERNAL
           })(state, dispatch);
         } else {

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

@@ -8,17 +8,24 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _commands = require("./commands");
-var activateWithAnalytics = exports.activateWithAnalytics = function activateWithAnalytics(editorAnalyticsAPI) {
+/**
+ * Hosts that do not install `editorViewMode` are always editing, so the attribute
+ * falls back to `edit` when the api is absent.
+ */
+
+var activateWithAnalytics = exports.activateWithAnalytics = function activateWithAnalytics(editorAnalyticsAPI, editorViewModeAPI) {
   return function (_ref) {
     var triggerMethod = _ref.triggerMethod;
     return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, function (state) {
+      var _editorViewModeAPI$sh, _editorViewModeAPI$sh2;
       return {
         eventType: _analytics.EVENT_TYPE.UI,
         action: _analytics.ACTION.ACTIVATED,
         actionSubject: _analytics.ACTION_SUBJECT.FIND_REPLACE_DIALOG,
         attributes: {
           inputMethod: state.selection instanceof _state.TextSelection && !state.selection.empty ? _analytics.INPUT_METHOD.PREFILL : _analytics.INPUT_METHOD.KEYBOARD,
-          triggerMethod: triggerMethod
+          triggerMethod: triggerMethod,
+          editorViewMode: (_editorViewModeAPI$sh = editorViewModeAPI === null || editorViewModeAPI === void 0 || (_editorViewModeAPI$sh2 = editorViewModeAPI.sharedState.currentState()) === null || _editorViewModeAPI$sh2 === void 0 ? void 0 : _editorViewModeAPI$sh2.mode) !== null && _editorViewModeAPI$sh !== void 0 ? _editorViewModeAPI$sh : 'edit'
         }
       };
     })((0, _commands.activate)());

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

@@ -8,19 +8,19 @@ 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) {
+var activateFindReplace = function activateFindReplace(editorAnalyticsAPI, editorViewModeAPI) {
   return function (state, dispatch) {
-    (0, _commandsWithAnalytics.activateWithAnalytics)(editorAnalyticsAPI)({
+    (0, _commandsWithAnalytics.activateWithAnalytics)(editorAnalyticsAPI, editorViewModeAPI)({
       triggerMethod: _analytics.TRIGGER_METHOD.SHORTCUT
     })(state, dispatch);
     return true;
   };
 };
-var keymapPlugin = function keymapPlugin(editorAnalyticsAPI) {
+var keymapPlugin = function keymapPlugin(editorAnalyticsAPI, editorViewModeAPI) {
   var list = {};
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  (0, _keymaps.bindKeymapWithCommand)(_keymaps.find.common, activateFindReplace(editorAnalyticsAPI), list);
+  if (_keymaps.find.common) {
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.find.common, activateFindReplace(editorAnalyticsAPI, editorViewModeAPI), list);
+  }
   return (0, _keymap.keymap)(list);
 };
 var _default = exports.default = keymapPlugin;

package/dist/cjs/pm-plugins/view-mode-shortcut.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.viewModeShortcutPlugin = void 0;
+var _bindEventListener = require("bind-event-listener");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _commandsWithAnalytics = require("./commands-with-analytics");
+/**
+ * Whether the event came from a field the user is typing into. `Mod-f` belongs to
+ * that field, not to us.
+ */
+var isFromTextEntry = function isFromTextEntry(event) {
+  var target = event.target;
+  return target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
+};
+var activateInViewMode = function activateInViewMode(api) {
+  return function (state, dispatch) {
+    var _api$editorViewMode, _api$analytics;
+    // In edit mode `./keymap.ts` already handles `Mod-f`. Handling it here as well
+    // would activate the dialog twice from a single keypress.
+    if ((api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) !== 'view') {
+      return false;
+    }
+    (0, _commandsWithAnalytics.activateWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 ? void 0 : api.editorViewMode)({
+      triggerMethod: _analytics.TRIGGER_METHOD.SHORTCUT
+    })(state, dispatch);
+    return true;
+  };
+};
+
+/**
+ * Opens the find dialog on `Mod-f` while the editor is in view mode.
+ *
+ * The listener is bound on the document so that it still fires in view mode, where
+ * ProseMirror delivers the keydown to neither `keymap()` nor `handleDOMEvents`.
+ */
+var viewModeShortcutPlugin = exports.viewModeShortcutPlugin = function viewModeShortcutPlugin(api) {
+  var bindings = {};
+  if (_keymaps.find.common) {
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.find.common, activateInViewMode(api), bindings);
+  }
+  var handleKeydown = (0, _keymap.keydownHandler)(bindings);
+  return new _safePlugin.SafePlugin({
+    view: function view(_view) {
+      var unbind = (0, _bindEventListener.bind)(_view.root, {
+        type: 'keydown',
+        listener: function listener(event) {
+          // `view.root` is `Document | ShadowRoot`, so the binding widens the event.
+          if (!(event instanceof KeyboardEvent) || isFromTextEntry(event)) {
+            return;
+          }
+          if (handleKeydown(_view, event)) {
+            // Without this the browser find bar opens on top of our dialog.
+            event.preventDefault();
+          }
+        }
+      });
+      return {
+        destroy: unbind
+      };
+    }
+  });
+};

package/dist/cjs/ui/FindReplace.js

@@ -22,6 +22,17 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
+// Magic number taken from ./FindReplaceToolbarButton.tsx
+var dropdownWidth = 382;
+
+// Without replace the find row is the widest row, so the popup would size to it and
+// change width as the match counter appears. Pin it to the width the dropdown reserves.
+var findOnlyWidthStyles = (0, _react2.css)({
+  boxSizing: 'border-box',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  width: "".concat(dropdownWidth, "px"),
+  maxWidth: '100%'
+});
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
   function FindReplace(props) {
@@ -78,16 +89,18 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
         allowMatchCase = _this$props.allowMatchCase,
         shouldMatchCase = _this$props.shouldMatchCase,
         onToggleMatchCase = _this$props.onToggleMatchCase,
-        intl = _this$props.intl;
+        intl = _this$props.intl,
+        _this$props$allowRepl = _this$props.allowReplace,
+        allowReplace = _this$props$allowRepl === void 0 ? true : _this$props$allowRepl;
       var focusToolbarButton = this.props.focusToolbarButton || function () {};
       return (0, _react2.jsx)("div", {
         role: 'dialog',
-        "aria-label": intl === null || intl === void 0 ? void 0 : intl.formatMessage(_messages.findReplaceMessages.findReplaceDialogAriaLabel),
+        "aria-label": intl === null || intl === void 0 ? void 0 : intl.formatMessage(allowReplace ? _messages.findReplaceMessages.findReplaceDialogAriaLabel : _messages.findReplaceMessages.findDialogAriaLabel),
         "aria-modal": false,
         ref: this.modalRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         ,
-        css: [_uiStyles.wrapperStyles, _uiStyles.wrapperPaddingStyles]
+        css: [_uiStyles.wrapperStyles, _uiStyles.wrapperPaddingStyles, !allowReplace && findOnlyWidthStyles]
       }, (0, _react2.jsx)(_Find.default, {
         allowMatchCase: allowMatchCase,
         shouldMatchCase: shouldMatchCase,
@@ -104,11 +117,14 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
         onArrowDown: this.setFocusToReplace,
         findTyped: this.state.findTyped,
         setFindTyped: this.setFindTyped
-      }), (0, _react2.jsx)("hr", {
+      }), allowReplace &&
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      (0, _react2.jsx)("hr", {
         role: "presentation",
         css: _uiStyles.ruleStyles,
         id: "replace-hr-element"
       }), (0, _react2.jsx)(_Replace.default, {
+        allowReplace: allowReplace,
         canReplace: !!isReplaceable,
         replaceText: replaceText,
         onReplace: onReplace,

package/dist/cjs/ui/FindReplaceDropDownOrToolbarButtonWithState.js

@@ -9,6 +9,9 @@ exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _unsafeExpValNoExposure = require("@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure");
+var _conditionalHooksFactory = require("@atlaskit/platform-feature-flags-react/conditional-hooks-factory/conditional-hooks-factory");
 var _commands = require("../pm-plugins/commands");
 var _commandsWithAnalytics = require("../pm-plugins/commands-with-analytics");
 var _FindReplaceDropdown = _interopRequireDefault(require("./FindReplaceDropdown"));
@@ -39,6 +42,16 @@ var useSharedPluginStateNoDebounce = function useSharedPluginStateNoDebounce(api
     findReplaceState: state
   };
 };
+var useEditorViewMode = (0, _conditionalHooksFactory.conditionalHooksFactory)(function () {
+  return (0, _unsafeExpValNoExposure.UNSAFE_expValNoExposure)('platform_editor_collapsible_headings', 'isEnabled', false);
+}, function (api) {
+  return (0, _hooks.useSharedPluginStateWithSelector)(api, ['editorViewMode'], function (states) {
+    var _states$editorViewMod;
+    return (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode;
+  });
+}, function () {
+  return undefined;
+});
 var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithState(_ref2) {
   var _api$analytics, _matches$index;
   var popupsBoundariesElement = _ref2.popupsBoundariesElement,
@@ -55,6 +68,8 @@ var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithSta
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   var _useSharedPluginState = useSharedPluginStateNoDebounce(api),
     findReplaceState = _useSharedPluginState.findReplaceState;
+  var editorViewMode = useEditorViewMode(api);
+  var allowReplace = editorViewMode !== 'view';
   var shouldMatchCase = findReplaceState === null || findReplaceState === void 0 ? void 0 : findReplaceState.shouldMatchCase;
   var isActive = findReplaceState === null || findReplaceState === void 0 ? void 0 : findReplaceState.isActive;
   var findText = findReplaceState === null || findReplaceState === void 0 ? void 0 : findReplaceState.findText;
@@ -82,7 +97,7 @@ var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithSta
   };
   var handleActivate = function handleActivate() {
     runWithEditorFocused(function () {
-      return dispatchCommand((0, _commandsWithAnalytics.activateWithAnalytics)(editorAnalyticsAPI)({
+      return dispatchCommand((0, _commandsWithAnalytics.activateWithAnalytics)(editorAnalyticsAPI, api === null || api === void 0 ? void 0 : api.editorViewMode)({
         triggerMethod: _analytics.TRIGGER_METHOD.TOOLBAR
       }));
     });
@@ -176,7 +191,8 @@ var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithSta
     onReplace: handleReplace,
     onReplaceAll: handleReplaceAll,
     takeFullWidth: !!takeFullWidth,
-    isButtonHidden: isButtonHidden
+    isButtonHidden: isButtonHidden,
+    allowReplace: allowReplace
   });
 };
 var _default_1 = /*#__PURE__*/_react.default.memo(FindReplaceToolbarButtonWithState);

package/dist/cjs/ui/Replace.js

@@ -31,6 +31,11 @@ var replaceWithLabelStyle = (0, _primitives.xcss)({
 var actionButtonContainerStyles = (0, _primitives.xcss)({
   paddingTop: 'space.200'
 });
+
+// Without the replace field above it, the button row needs no separating space.
+var findOnlyActionButtonContainerStyles = (0, _primitives.xcss)({
+  paddingTop: 'space.0'
+});
 var actionButtonParentInlineStyles = (0, _primitives.xcss)({
   justifyContent: 'space-between',
   flexDirection: 'row-reverse',
@@ -44,7 +49,9 @@ var closeButtonInlineStyles = (0, _primitives.xcss)({
   marginRight: 'auto'
 });
 var Replace = function Replace(_ref) {
-  var canReplace = _ref.canReplace,
+  var _ref$allowReplace = _ref.allowReplace,
+    allowReplace = _ref$allowReplace === void 0 ? true : _ref$allowReplace,
+    canReplace = _ref.canReplace,
     initialReplaceText = _ref.replaceText,
     onReplace = _ref.onReplace,
     onReplaceAll = _ref.onReplaceAll,
@@ -194,7 +201,7 @@ var Replace = function Replace(_ref) {
   });
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: replaceContainerStyles
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+  }, allowReplace && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: replaceWithLabelStyle
   }, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     id: "replace-text-field-label",
@@ -217,8 +224,8 @@ var Replace = function Replace(_ref) {
     ref: successReplacementMessageRef
   }, /*#__PURE__*/_react.default.createElement(_validMessage.ValidMessage, {
     testId: "message-success-replacement"
-  }, fakeSuccessReplacementMessageUpdate ? resultsReplace.replace(SPACE_REGEX, "\xA0") : resultsReplace)), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: actionButtonContainerStyles
+  }, fakeSuccessReplacementMessageUpdate ? resultsReplace.replace(SPACE_REGEX, "\xA0") : resultsReplace))), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: allowReplace ? actionButtonContainerStyles : findOnlyActionButtonContainerStyles
   }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     xcss: actionButtonParentInlineStyles
   }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
@@ -251,7 +258,7 @@ var Replace = function Replace(_ref) {
     keymapDescription: 'Shift Enter',
     onClick: handleFindPrevClick,
     disabled: count.total <= 1
-  }), /*#__PURE__*/_react.default.createElement(_button.default, {
+  }), allowReplace && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.default, {
     testId: 'Replace',
     id: "replace-button",
     onClick: handleReplaceClick,
@@ -262,7 +269,7 @@ var Replace = function Replace(_ref) {
     id: "replaceAll-button",
     onClick: handleReplaceAllClick,
     isDisabled: count.totalReplaceable === 0
-  }, replaceAll)), /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+  }, replaceAll))), /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     xcss: closeButtonInlineStyles
   }, /*#__PURE__*/_react.default.createElement(_button.default, {
     appearance: "subtle",

package/dist/es2019/findReplacePlugin.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
+import { UNSAFE_expValNoExposure } from '@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { activate } from './pm-plugins/commands';
@@ -9,6 +10,7 @@ import { activateWithAnalytics } from './pm-plugins/commands-with-analytics';
 import keymapPlugin from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
 import { findReplacePluginKey } from './pm-plugins/plugin-key';
+import { viewModeShortcutPlugin } from './pm-plugins/view-mode-shortcut';
 import FindReplaceDropDownOrToolbarButtonWithState from './ui/FindReplaceDropDownOrToolbarButtonWithState';
 export const findReplacePlugin = ({
   config: props,
@@ -71,9 +73,15 @@ export const findReplacePlugin = ({
         name: 'findReplaceKeymap',
         plugin: () => {
           var _api$analytics;
-          return keymapPlugin(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+          return keymapPlugin(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 ? void 0 : api.editorViewMode);
         }
       }];
+      if (api !== null && api !== void 0 && api.editorViewMode && UNSAFE_expValNoExposure('platform_editor_collapsible_headings', 'isEnabled', false)) {
+        plugins.push({
+          name: 'findReplaceViewModeShortcut',
+          plugin: () => viewModeShortcutPlugin(api)
+        });
+      }
       if (editorExperiment('platform_editor_controls', 'variant1', {
         exposure: false
       })) {
@@ -134,7 +142,7 @@ export const findReplacePlugin = ({
         } = editorViewRef.current;
         if (api !== null && api !== void 0 && (_api$analytics2 = api.analytics) !== null && _api$analytics2 !== void 0 && _api$analytics2.actions) {
           var _api$analytics3;
-          activateWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions)({
+          activateWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, api === null || api === void 0 ? void 0 : api.editorViewMode)({
             triggerMethod: triggerMethod || TRIGGER_METHOD.EXTERNAL
           })(state, dispatch);
         } else {

package/dist/es2019/pm-plugins/commands-with-analytics.js

@@ -2,17 +2,27 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/edit
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { activate, cancelSearch, find, findNext, findPrevious, replace, replaceAll } from './commands';
-export const activateWithAnalytics = editorAnalyticsAPI => ({
+
+/**
+ * Hosts that do not install `editorViewMode` are always editing, so the attribute
+ * falls back to `edit` when the api is absent.
+ */
+
+export const activateWithAnalytics = (editorAnalyticsAPI, editorViewModeAPI) => ({
   triggerMethod
-}) => withAnalytics(editorAnalyticsAPI, state => ({
-  eventType: EVENT_TYPE.UI,
-  action: ACTION.ACTIVATED,
-  actionSubject: ACTION_SUBJECT.FIND_REPLACE_DIALOG,
-  attributes: {
-    inputMethod: state.selection instanceof TextSelection && !state.selection.empty ? INPUT_METHOD.PREFILL : INPUT_METHOD.KEYBOARD,
-    triggerMethod
-  }
-}))(activate());
+}) => withAnalytics(editorAnalyticsAPI, state => {
+  var _editorViewModeAPI$sh, _editorViewModeAPI$sh2;
+  return {
+    eventType: EVENT_TYPE.UI,
+    action: ACTION.ACTIVATED,
+    actionSubject: ACTION_SUBJECT.FIND_REPLACE_DIALOG,
+    attributes: {
+      inputMethod: state.selection instanceof TextSelection && !state.selection.empty ? INPUT_METHOD.PREFILL : INPUT_METHOD.KEYBOARD,
+      triggerMethod,
+      editorViewMode: (_editorViewModeAPI$sh = editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : (_editorViewModeAPI$sh2 = editorViewModeAPI.sharedState.currentState()) === null || _editorViewModeAPI$sh2 === void 0 ? void 0 : _editorViewModeAPI$sh2.mode) !== null && _editorViewModeAPI$sh !== void 0 ? _editorViewModeAPI$sh : 'edit'
+    }
+  };
+})(activate());
 export const findWithAnalytics = editorAnalyticsAPI => ({
   editorView,
   containerElement,

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

@@ -2,17 +2,17 @@ import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
 import { bindKeymapWithCommand, find as findKeymap } from '@atlaskit/editor-common/keymaps';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { activateWithAnalytics } from './commands-with-analytics';
-const activateFindReplace = editorAnalyticsAPI => (state, dispatch) => {
-  activateWithAnalytics(editorAnalyticsAPI)({
+const activateFindReplace = (editorAnalyticsAPI, editorViewModeAPI) => (state, dispatch) => {
+  activateWithAnalytics(editorAnalyticsAPI, editorViewModeAPI)({
     triggerMethod: TRIGGER_METHOD.SHORTCUT
   })(state, dispatch);
   return true;
 };
-const keymapPlugin = editorAnalyticsAPI => {
+const keymapPlugin = (editorAnalyticsAPI, editorViewModeAPI) => {
   const list = {};
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  bindKeymapWithCommand(findKeymap.common, activateFindReplace(editorAnalyticsAPI), list);
+  if (findKeymap.common) {
+    bindKeymapWithCommand(findKeymap.common, activateFindReplace(editorAnalyticsAPI, editorViewModeAPI), list);
+  }
   return keymap(list);
 };
 export default keymapPlugin;

package/dist/es2019/pm-plugins/view-mode-shortcut.js

@@ -0,0 +1,61 @@
+import { bind } from 'bind-event-listener';
+import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
+import { bindKeymapWithCommand, find as findKeymap } from '@atlaskit/editor-common/keymaps';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
+import { activateWithAnalytics } from './commands-with-analytics';
+
+/**
+ * Whether the event came from a field the user is typing into. `Mod-f` belongs to
+ * that field, not to us.
+ */
+const isFromTextEntry = event => {
+  const target = event.target;
+  return target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
+};
+const activateInViewMode = api => (state, dispatch) => {
+  var _api$editorViewMode, _api$editorViewMode$s, _api$analytics;
+  // In edit mode `./keymap.ts` already handles `Mod-f`. Handling it here as well
+  // would activate the dialog twice from a single keypress.
+  if ((api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) !== 'view') {
+    return false;
+  }
+  activateWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 ? void 0 : api.editorViewMode)({
+    triggerMethod: TRIGGER_METHOD.SHORTCUT
+  })(state, dispatch);
+  return true;
+};
+
+/**
+ * Opens the find dialog on `Mod-f` while the editor is in view mode.
+ *
+ * The listener is bound on the document so that it still fires in view mode, where
+ * ProseMirror delivers the keydown to neither `keymap()` nor `handleDOMEvents`.
+ */
+export const viewModeShortcutPlugin = api => {
+  const bindings = {};
+  if (findKeymap.common) {
+    bindKeymapWithCommand(findKeymap.common, activateInViewMode(api), bindings);
+  }
+  const handleKeydown = keydownHandler(bindings);
+  return new SafePlugin({
+    view: view => {
+      const unbind = bind(view.root, {
+        type: 'keydown',
+        listener: event => {
+          // `view.root` is `Document | ShadowRoot`, so the binding widens the event.
+          if (!(event instanceof KeyboardEvent) || isFromTextEntry(event)) {
+            return;
+          }
+          if (handleKeydown(view, event)) {
+            // Without this the browser find bar opens on top of our dialog.
+            event.preventDefault();
+          }
+        }
+      });
+      return {
+        destroy: unbind
+      };
+    }
+  });
+};

package/dist/es2019/ui/FindReplace.js

@@ -9,11 +9,23 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { findReplaceMessages as messages } from '@atlaskit/editor-common/messages';
 import Find from './Find';
 import Replace from './Replace';
 import { ruleStyles, wrapperPaddingStyles, wrapperStyles } from './ui-styles';
+
+// Magic number taken from ./FindReplaceToolbarButton.tsx
+const dropdownWidth = 382;
+
+// Without replace the find row is the widest row, so the popup would size to it and
+// change width as the match counter appears. Pin it to the width the dropdown reserves.
+const findOnlyWidthStyles = css({
+  boxSizing: 'border-box',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  width: `${dropdownWidth}px`,
+  maxWidth: '100%'
+});
 // eslint-disable-next-line @repo/internal/react/no-class-components
 class FindReplace extends React.PureComponent {
   constructor(props) {
@@ -64,17 +76,18 @@ class FindReplace extends React.PureComponent {
       allowMatchCase,
       shouldMatchCase,
       onToggleMatchCase,
-      intl
+      intl,
+      allowReplace = true
     } = this.props;
     const focusToolbarButton = this.props.focusToolbarButton || (() => {});
     return jsx("div", {
       role: 'dialog',
-      "aria-label": intl === null || intl === void 0 ? void 0 : intl.formatMessage(messages.findReplaceDialogAriaLabel),
+      "aria-label": intl === null || intl === void 0 ? void 0 : intl.formatMessage(allowReplace ? messages.findReplaceDialogAriaLabel : messages.findDialogAriaLabel),
       "aria-modal": false,
       ref: this.modalRef
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       ,
-      css: [wrapperStyles, wrapperPaddingStyles]
+      css: [wrapperStyles, wrapperPaddingStyles, !allowReplace && findOnlyWidthStyles]
     }, jsx(Find, {
       allowMatchCase: allowMatchCase,
       shouldMatchCase: shouldMatchCase,
@@ -91,11 +104,14 @@ class FindReplace extends React.PureComponent {
       onArrowDown: this.setFocusToReplace,
       findTyped: this.state.findTyped,
       setFindTyped: this.setFindTyped
-    }), jsx("hr", {
+    }), allowReplace &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("hr", {
       role: "presentation",
       css: ruleStyles,
       id: "replace-hr-element"
     }), jsx(Replace, {
+      allowReplace: allowReplace,
       canReplace: !!isReplaceable,
       replaceText: replaceText,
       onReplace: onReplace,

package/dist/es2019/ui/FindReplaceDropDownOrToolbarButtonWithState.js

@@ -1,5 +1,8 @@
 import React, { useLayoutEffect, useState } from 'react';
 import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { UNSAFE_expValNoExposure } from '@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure';
+import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react/conditional-hooks-factory/conditional-hooks-factory';
 import { blur, toggleMatchCase } from '../pm-plugins/commands';
 import { activateWithAnalytics, cancelSearchWithAnalytics, findNextWithAnalytics, findPrevWithAnalytics, findWithAnalytics, replaceAllWithAnalytics, replaceWithAnalytics } from '../pm-plugins/commands-with-analytics';
 import FindReplaceDropdown from './FindReplaceDropdown';
@@ -28,6 +31,10 @@ const useSharedPluginStateNoDebounce = api => {
     findReplaceState: state
   };
 };
+const useEditorViewMode = conditionalHooksFactory(() => UNSAFE_expValNoExposure('platform_editor_collapsible_headings', 'isEnabled', false), api => useSharedPluginStateWithSelector(api, ['editorViewMode'], states => {
+  var _states$editorViewMod;
+  return (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode;
+}), () => undefined);
 const FindReplaceToolbarButtonWithState = ({
   popupsBoundariesElement,
   popupsMountPoint,
@@ -46,6 +53,8 @@ const FindReplaceToolbarButtonWithState = ({
   const {
     findReplaceState
   } = useSharedPluginStateNoDebounce(api);
+  const editorViewMode = useEditorViewMode(api);
+  const allowReplace = editorViewMode !== 'view';
   const shouldMatchCase = findReplaceState === null || findReplaceState === void 0 ? void 0 : findReplaceState.shouldMatchCase;
   const isActive = findReplaceState === null || findReplaceState === void 0 ? void 0 : findReplaceState.isActive;
   const findText = findReplaceState === null || findReplaceState === void 0 ? void 0 : findReplaceState.findText;
@@ -74,7 +83,7 @@ const FindReplaceToolbarButtonWithState = ({
     cmd(state, dispatch, editorView);
   };
   const handleActivate = () => {
-    runWithEditorFocused(() => dispatchCommand(activateWithAnalytics(editorAnalyticsAPI)({
+    runWithEditorFocused(() => dispatchCommand(activateWithAnalytics(editorAnalyticsAPI, api === null || api === void 0 ? void 0 : api.editorViewMode)({
       triggerMethod: TRIGGER_METHOD.TOOLBAR
     })));
   };
@@ -160,7 +169,8 @@ const FindReplaceToolbarButtonWithState = ({
     onReplace: handleReplace,
     onReplaceAll: handleReplaceAll,
     takeFullWidth: !!takeFullWidth,
-    isButtonHidden: isButtonHidden
+    isButtonHidden: isButtonHidden,
+    allowReplace: allowReplace
   });
 };
 const _default_1 = /*#__PURE__*/React.memo(FindReplaceToolbarButtonWithState);

package/dist/es2019/ui/Replace.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { Fragment, useState, useRef, useEffect } from 'react';
 import { injectIntl } from 'react-intl';
 import Button from '@atlaskit/button/default/button';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
@@ -20,6 +20,11 @@ const replaceWithLabelStyle = xcss({
 const actionButtonContainerStyles = xcss({
   paddingTop: 'space.200'
 });
+
+// Without the replace field above it, the button row needs no separating space.
+const findOnlyActionButtonContainerStyles = xcss({
+  paddingTop: 'space.0'
+});
 const actionButtonParentInlineStyles = xcss({
   justifyContent: 'space-between',
   flexDirection: 'row-reverse',
@@ -33,6 +38,7 @@ const closeButtonInlineStyles = xcss({
   marginRight: 'auto'
 });
 const Replace = ({
+  allowReplace = true,
   canReplace,
   replaceText: initialReplaceText,
   onReplace,
@@ -163,7 +169,7 @@ const Replace = ({
   });
   return /*#__PURE__*/React.createElement(Box, {
     xcss: replaceContainerStyles
-  }, /*#__PURE__*/React.createElement(Box, {
+  }, allowReplace && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Box, {
     xcss: replaceWithLabelStyle
   }, /*#__PURE__*/React.createElement(Text, {
     id: "replace-text-field-label",
@@ -186,8 +192,8 @@ const Replace = ({
     ref: successReplacementMessageRef
   }, /*#__PURE__*/React.createElement(ValidMessage, {
     testId: "message-success-replacement"
-  }, fakeSuccessReplacementMessageUpdate ? resultsReplace.replace(SPACE_REGEX, '\u00a0') : resultsReplace)), /*#__PURE__*/React.createElement(Box, {
-    xcss: actionButtonContainerStyles
+  }, fakeSuccessReplacementMessageUpdate ? resultsReplace.replace(SPACE_REGEX, '\u00a0') : resultsReplace))), /*#__PURE__*/React.createElement(Box, {
+    xcss: allowReplace ? actionButtonContainerStyles : findOnlyActionButtonContainerStyles
   }, /*#__PURE__*/React.createElement(Inline, {
     xcss: actionButtonParentInlineStyles
   }, /*#__PURE__*/React.createElement(Inline, {
@@ -216,7 +222,7 @@ const Replace = ({
     keymapDescription: 'Shift Enter',
     onClick: handleFindPrevClick,
     disabled: count.total <= 1
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), allowReplace && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, {
     testId: 'Replace',
     id: "replace-button",
     onClick: handleReplaceClick,
@@ -227,7 +233,7 @@ const Replace = ({
     id: "replaceAll-button",
     onClick: handleReplaceAllClick,
     isDisabled: count.totalReplaceable === 0
-  }, replaceAll)), /*#__PURE__*/React.createElement(Inline, {
+  }, replaceAll))), /*#__PURE__*/React.createElement(Inline, {
     xcss: closeButtonInlineStyles
   }, /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",

package/dist/esm/findReplacePlugin.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
+import { UNSAFE_expValNoExposure } from '@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { activate } from './pm-plugins/commands';
@@ -9,6 +10,7 @@ import { activateWithAnalytics } from './pm-plugins/commands-with-analytics';
 import keymapPlugin from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
 import { findReplacePluginKey } from './pm-plugins/plugin-key';
+import { viewModeShortcutPlugin } from './pm-plugins/view-mode-shortcut';
 import FindReplaceDropDownOrToolbarButtonWithState from './ui/FindReplaceDropDownOrToolbarButtonWithState';
 export var findReplacePlugin = function findReplacePlugin(_ref) {
   var _api$primaryToolbar;
@@ -70,9 +72,17 @@ export var findReplacePlugin = function findReplacePlugin(_ref) {
         name: 'findReplaceKeymap',
         plugin: function plugin() {
           var _api$analytics;
-          return keymapPlugin(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+          return keymapPlugin(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 ? void 0 : api.editorViewMode);
         }
       }];
+      if (api !== null && api !== void 0 && api.editorViewMode && UNSAFE_expValNoExposure('platform_editor_collapsible_headings', 'isEnabled', false)) {
+        plugins.push({
+          name: 'findReplaceViewModeShortcut',
+          plugin: function plugin() {
+            return viewModeShortcutPlugin(api);
+          }
+        });
+      }
       if (editorExperiment('platform_editor_controls', 'variant1', {
         exposure: false
       })) {
@@ -131,7 +141,7 @@ export var findReplacePlugin = function findReplacePlugin(_ref) {
           dispatch = _editorViewRef$curren.dispatch;
         if (api !== null && api !== void 0 && (_api$analytics2 = api.analytics) !== null && _api$analytics2 !== void 0 && _api$analytics2.actions) {
           var _api$analytics3;
-          activateWithAnalytics(api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions)({
+          activateWithAnalytics(api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, api === null || api === void 0 ? void 0 : api.editorViewMode)({
             triggerMethod: triggerMethod || TRIGGER_METHOD.EXTERNAL
           })(state, dispatch);
         } else {

package/dist/esm/pm-plugins/commands-with-analytics.js

@@ -2,17 +2,25 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/edit
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { activate, cancelSearch, find, findNext, findPrevious, replace, replaceAll } from './commands';
-export var activateWithAnalytics = function activateWithAnalytics(editorAnalyticsAPI) {
+
+/**
+ * Hosts that do not install `editorViewMode` are always editing, so the attribute
+ * falls back to `edit` when the api is absent.
+ */
+
+export var activateWithAnalytics = function activateWithAnalytics(editorAnalyticsAPI, editorViewModeAPI) {
   return function (_ref) {
     var triggerMethod = _ref.triggerMethod;
     return withAnalytics(editorAnalyticsAPI, function (state) {
+      var _editorViewModeAPI$sh, _editorViewModeAPI$sh2;
       return {
         eventType: EVENT_TYPE.UI,
         action: ACTION.ACTIVATED,
         actionSubject: ACTION_SUBJECT.FIND_REPLACE_DIALOG,
         attributes: {
           inputMethod: state.selection instanceof TextSelection && !state.selection.empty ? INPUT_METHOD.PREFILL : INPUT_METHOD.KEYBOARD,
-          triggerMethod: triggerMethod
+          triggerMethod: triggerMethod,
+          editorViewMode: (_editorViewModeAPI$sh = editorViewModeAPI === null || editorViewModeAPI === void 0 || (_editorViewModeAPI$sh2 = editorViewModeAPI.sharedState.currentState()) === null || _editorViewModeAPI$sh2 === void 0 ? void 0 : _editorViewModeAPI$sh2.mode) !== null && _editorViewModeAPI$sh !== void 0 ? _editorViewModeAPI$sh : 'edit'
         }
       };
     })(activate());

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

@@ -2,19 +2,19 @@ import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
 import { bindKeymapWithCommand, find as findKeymap } from '@atlaskit/editor-common/keymaps';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { activateWithAnalytics } from './commands-with-analytics';
-var activateFindReplace = function activateFindReplace(editorAnalyticsAPI) {
+var activateFindReplace = function activateFindReplace(editorAnalyticsAPI, editorViewModeAPI) {
   return function (state, dispatch) {
-    activateWithAnalytics(editorAnalyticsAPI)({
+    activateWithAnalytics(editorAnalyticsAPI, editorViewModeAPI)({
       triggerMethod: TRIGGER_METHOD.SHORTCUT
     })(state, dispatch);
     return true;
   };
 };
-var keymapPlugin = function keymapPlugin(editorAnalyticsAPI) {
+var keymapPlugin = function keymapPlugin(editorAnalyticsAPI, editorViewModeAPI) {
   var list = {};
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  bindKeymapWithCommand(findKeymap.common, activateFindReplace(editorAnalyticsAPI), list);
+  if (findKeymap.common) {
+    bindKeymapWithCommand(findKeymap.common, activateFindReplace(editorAnalyticsAPI, editorViewModeAPI), list);
+  }
   return keymap(list);
 };
 export default keymapPlugin;

package/dist/esm/pm-plugins/view-mode-shortcut.js

@@ -0,0 +1,63 @@
+import { bind } from 'bind-event-listener';
+import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
+import { bindKeymapWithCommand, find as findKeymap } from '@atlaskit/editor-common/keymaps';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
+import { activateWithAnalytics } from './commands-with-analytics';
+
+/**
+ * Whether the event came from a field the user is typing into. `Mod-f` belongs to
+ * that field, not to us.
+ */
+var isFromTextEntry = function isFromTextEntry(event) {
+  var target = event.target;
+  return target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
+};
+var activateInViewMode = function activateInViewMode(api) {
+  return function (state, dispatch) {
+    var _api$editorViewMode, _api$analytics;
+    // In edit mode `./keymap.ts` already handles `Mod-f`. Handling it here as well
+    // would activate the dialog twice from a single keypress.
+    if ((api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) !== 'view') {
+      return false;
+    }
+    activateWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 ? void 0 : api.editorViewMode)({
+      triggerMethod: TRIGGER_METHOD.SHORTCUT
+    })(state, dispatch);
+    return true;
+  };
+};
+
+/**
+ * Opens the find dialog on `Mod-f` while the editor is in view mode.
+ *
+ * The listener is bound on the document so that it still fires in view mode, where
+ * ProseMirror delivers the keydown to neither `keymap()` nor `handleDOMEvents`.
+ */
+export var viewModeShortcutPlugin = function viewModeShortcutPlugin(api) {
+  var bindings = {};
+  if (findKeymap.common) {
+    bindKeymapWithCommand(findKeymap.common, activateInViewMode(api), bindings);
+  }
+  var handleKeydown = keydownHandler(bindings);
+  return new SafePlugin({
+    view: function view(_view) {
+      var unbind = bind(_view.root, {
+        type: 'keydown',
+        listener: function listener(event) {
+          // `view.root` is `Document | ShadowRoot`, so the binding widens the event.
+          if (!(event instanceof KeyboardEvent) || isFromTextEntry(event)) {
+            return;
+          }
+          if (handleKeydown(_view, event)) {
+            // Without this the browser find bar opens on top of our dialog.
+            event.preventDefault();
+          }
+        }
+      });
+      return {
+        destroy: unbind
+      };
+    }
+  });
+};

package/dist/esm/ui/FindReplace.js

@@ -16,11 +16,23 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { findReplaceMessages as messages } from '@atlaskit/editor-common/messages';
 import Find from './Find';
 import Replace from './Replace';
 import { ruleStyles, wrapperPaddingStyles, wrapperStyles } from './ui-styles';
+
+// Magic number taken from ./FindReplaceToolbarButton.tsx
+var dropdownWidth = 382;
+
+// Without replace the find row is the widest row, so the popup would size to it and
+// change width as the match counter appears. Pin it to the width the dropdown reserves.
+var findOnlyWidthStyles = css({
+  boxSizing: 'border-box',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  width: "".concat(dropdownWidth, "px"),
+  maxWidth: '100%'
+});
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
   function FindReplace(props) {
@@ -77,16 +89,18 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
         allowMatchCase = _this$props.allowMatchCase,
         shouldMatchCase = _this$props.shouldMatchCase,
         onToggleMatchCase = _this$props.onToggleMatchCase,
-        intl = _this$props.intl;
+        intl = _this$props.intl,
+        _this$props$allowRepl = _this$props.allowReplace,
+        allowReplace = _this$props$allowRepl === void 0 ? true : _this$props$allowRepl;
       var focusToolbarButton = this.props.focusToolbarButton || function () {};
       return jsx("div", {
         role: 'dialog',
-        "aria-label": intl === null || intl === void 0 ? void 0 : intl.formatMessage(messages.findReplaceDialogAriaLabel),
+        "aria-label": intl === null || intl === void 0 ? void 0 : intl.formatMessage(allowReplace ? messages.findReplaceDialogAriaLabel : messages.findDialogAriaLabel),
         "aria-modal": false,
         ref: this.modalRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         ,
-        css: [wrapperStyles, wrapperPaddingStyles]
+        css: [wrapperStyles, wrapperPaddingStyles, !allowReplace && findOnlyWidthStyles]
       }, jsx(Find, {
         allowMatchCase: allowMatchCase,
         shouldMatchCase: shouldMatchCase,
@@ -103,11 +117,14 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
         onArrowDown: this.setFocusToReplace,
         findTyped: this.state.findTyped,
         setFindTyped: this.setFindTyped
-      }), jsx("hr", {
+      }), allowReplace &&
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      jsx("hr", {
         role: "presentation",
         css: ruleStyles,
         id: "replace-hr-element"
       }), jsx(Replace, {
+        allowReplace: allowReplace,
         canReplace: !!isReplaceable,
         replaceText: replaceText,
         onReplace: onReplace,

package/dist/esm/ui/FindReplaceDropDownOrToolbarButtonWithState.js

@@ -1,6 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useLayoutEffect, useState } from 'react';
 import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { UNSAFE_expValNoExposure } from '@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure';
+import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react/conditional-hooks-factory/conditional-hooks-factory';
 import { blur, toggleMatchCase } from '../pm-plugins/commands';
 import { activateWithAnalytics, cancelSearchWithAnalytics, findNextWithAnalytics, findPrevWithAnalytics, findWithAnalytics, replaceAllWithAnalytics, replaceWithAnalytics } from '../pm-plugins/commands-with-analytics';
 import FindReplaceDropdown from './FindReplaceDropdown';
@@ -31,6 +34,16 @@ var useSharedPluginStateNoDebounce = function useSharedPluginStateNoDebounce(api
     findReplaceState: state
   };
 };
+var useEditorViewMode = conditionalHooksFactory(function () {
+  return UNSAFE_expValNoExposure('platform_editor_collapsible_headings', 'isEnabled', false);
+}, function (api) {
+  return useSharedPluginStateWithSelector(api, ['editorViewMode'], function (states) {
+    var _states$editorViewMod;
+    return (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode;
+  });
+}, function () {
+  return undefined;
+});
 var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithState(_ref2) {
   var _api$analytics, _matches$index;
   var popupsBoundariesElement = _ref2.popupsBoundariesElement,
@@ -47,6 +60,8 @@ var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithSta
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   var _useSharedPluginState = useSharedPluginStateNoDebounce(api),
     findReplaceState = _useSharedPluginState.findReplaceState;
+  var editorViewMode = useEditorViewMode(api);
+  var allowReplace = editorViewMode !== 'view';
   var shouldMatchCase = findReplaceState === null || findReplaceState === void 0 ? void 0 : findReplaceState.shouldMatchCase;
   var isActive = findReplaceState === null || findReplaceState === void 0 ? void 0 : findReplaceState.isActive;
   var findText = findReplaceState === null || findReplaceState === void 0 ? void 0 : findReplaceState.findText;
@@ -74,7 +89,7 @@ var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithSta
   };
   var handleActivate = function handleActivate() {
     runWithEditorFocused(function () {
-      return dispatchCommand(activateWithAnalytics(editorAnalyticsAPI)({
+      return dispatchCommand(activateWithAnalytics(editorAnalyticsAPI, api === null || api === void 0 ? void 0 : api.editorViewMode)({
         triggerMethod: TRIGGER_METHOD.TOOLBAR
       }));
     });
@@ -168,7 +183,8 @@ var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithSta
     onReplace: handleReplace,
     onReplaceAll: handleReplaceAll,
     takeFullWidth: !!takeFullWidth,
-    isButtonHidden: isButtonHidden
+    isButtonHidden: isButtonHidden,
+    allowReplace: allowReplace
   });
 };
 var _default_1 = /*#__PURE__*/React.memo(FindReplaceToolbarButtonWithState);

package/dist/esm/ui/Replace.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState, useRef, useEffect } from 'react';
+import React, { Fragment, useState, useRef, useEffect } from 'react';
 import { injectIntl } from 'react-intl';
 import Button from '@atlaskit/button/default/button';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
@@ -21,6 +21,11 @@ var replaceWithLabelStyle = xcss({
 var actionButtonContainerStyles = xcss({
   paddingTop: 'space.200'
 });
+
+// Without the replace field above it, the button row needs no separating space.
+var findOnlyActionButtonContainerStyles = xcss({
+  paddingTop: 'space.0'
+});
 var actionButtonParentInlineStyles = xcss({
   justifyContent: 'space-between',
   flexDirection: 'row-reverse',
@@ -34,7 +39,9 @@ var closeButtonInlineStyles = xcss({
   marginRight: 'auto'
 });
 var Replace = function Replace(_ref) {
-  var canReplace = _ref.canReplace,
+  var _ref$allowReplace = _ref.allowReplace,
+    allowReplace = _ref$allowReplace === void 0 ? true : _ref$allowReplace,
+    canReplace = _ref.canReplace,
     initialReplaceText = _ref.replaceText,
     onReplace = _ref.onReplace,
     onReplaceAll = _ref.onReplaceAll,
@@ -184,7 +191,7 @@ var Replace = function Replace(_ref) {
   });
   return /*#__PURE__*/React.createElement(Box, {
     xcss: replaceContainerStyles
-  }, /*#__PURE__*/React.createElement(Box, {
+  }, allowReplace && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Box, {
     xcss: replaceWithLabelStyle
   }, /*#__PURE__*/React.createElement(Text, {
     id: "replace-text-field-label",
@@ -207,8 +214,8 @@ var Replace = function Replace(_ref) {
     ref: successReplacementMessageRef
   }, /*#__PURE__*/React.createElement(ValidMessage, {
     testId: "message-success-replacement"
-  }, fakeSuccessReplacementMessageUpdate ? resultsReplace.replace(SPACE_REGEX, "\xA0") : resultsReplace)), /*#__PURE__*/React.createElement(Box, {
-    xcss: actionButtonContainerStyles
+  }, fakeSuccessReplacementMessageUpdate ? resultsReplace.replace(SPACE_REGEX, "\xA0") : resultsReplace))), /*#__PURE__*/React.createElement(Box, {
+    xcss: allowReplace ? actionButtonContainerStyles : findOnlyActionButtonContainerStyles
   }, /*#__PURE__*/React.createElement(Inline, {
     xcss: actionButtonParentInlineStyles
   }, /*#__PURE__*/React.createElement(Inline, {
@@ -241,7 +248,7 @@ var Replace = function Replace(_ref) {
     keymapDescription: 'Shift Enter',
     onClick: handleFindPrevClick,
     disabled: count.total <= 1
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), allowReplace && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, {
     testId: 'Replace',
     id: "replace-button",
     onClick: handleReplaceClick,
@@ -252,7 +259,7 @@ var Replace = function Replace(_ref) {
     id: "replaceAll-button",
     onClick: handleReplaceAllClick,
     isDisabled: count.totalReplaceable === 0
-  }, replaceAll)), /*#__PURE__*/React.createElement(Inline, {
+  }, replaceAll))), /*#__PURE__*/React.createElement(Inline, {
     xcss: closeButtonInlineStyles
   }, /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",

package/dist/types/findReplacePluginType.d.ts

@@ -3,6 +3,7 @@ import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/t
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockCollapsePlugin } from '@atlaskit/editor-plugin-block-collapse/blockCollapsePluginType';
 import type { CardPlugin } from '@atlaskit/editor-plugin-card';
+import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode/editorViewmodePluginType';
 import type { ExpandPlugin } from '@atlaskit/editor-plugin-expand';
 import type { MentionsPlugin } from '@atlaskit/editor-plugin-mentions';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
@@ -19,6 +20,7 @@ export type FindReplacePluginDependencies = [
     OptionalPlugin<CardPlugin>,
     OptionalPlugin<ExpandPlugin>,
     OptionalPlugin<BlockCollapsePlugin>,
+    OptionalPlugin<EditorViewModePlugin>,
     OptionalPlugin<SyncedBlockPlugin>
 ];
 export type FindReplacePlugin = NextEditorPlugin<'findReplace', {

package/dist/types/pm-plugins/commands-with-analytics.d.ts

@@ -1,7 +1,13 @@
 import type { EditorAnalyticsAPI, TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
-import type { Command } from '@atlaskit/editor-common/types';
+import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export declare const activateWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ triggerMethod, }: {
+import type { FindReplacePlugin } from '../findReplacePluginType';
+/**
+ * Hosts that do not install `editorViewMode` are always editing, so the attribute
+ * falls back to `edit` when the api is absent.
+ */
+export type EditorViewModeAPI = ExtractInjectionAPI<FindReplacePlugin>['editorViewMode'];
+export declare const activateWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorViewModeAPI?: EditorViewModeAPI) => ({ triggerMethod, }: {
     triggerMethod: TRIGGER_METHOD.SHORTCUT | TRIGGER_METHOD.TOOLBAR | TRIGGER_METHOD.EXTERNAL;
 }) => Command;
 export declare const findWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ editorView, containerElement, keyword, }: {

package/dist/types/pm-plugins/keymap.d.ts

@@ -1,4 +1,5 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-declare const keymapPlugin: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => SafePlugin;
+import type { EditorViewModeAPI } from './commands-with-analytics';
+declare const keymapPlugin: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorViewModeAPI: EditorViewModeAPI) => SafePlugin;
 export default keymapPlugin;

package/dist/types/pm-plugins/view-mode-shortcut.d.ts

@@ -0,0 +1,10 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { FindReplacePlugin } from '../findReplacePluginType';
+/**
+ * Opens the find dialog on `Mod-f` while the editor is in view mode.
+ *
+ * The listener is bound on the document so that it still fires in view mode, where
+ * ProseMirror delivers the keydown to neither `keymap()` nor `handleDOMEvents`.
+ */
+export declare const viewModeShortcutPlugin: (api?: ExtractInjectionAPI<FindReplacePlugin>) => SafePlugin;

package/dist/types/ui/FindReplace.d.ts

@@ -8,6 +8,11 @@ import type { IntlShape } from 'react-intl';
 import type { DispatchAnalyticsEvent, TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
 import type { MatchCaseProps } from '../types';
 export type FindReplaceProps = {
+    /**
+     * When `false`, the dialog offers find only: the replace label, field, replacement
+     * count message and both replace buttons are not rendered.
+     */
+    allowReplace?: boolean;
     count: {
         index: number;
         total: number;

package/dist/types/ui/Replace.d.ts

@@ -3,6 +3,12 @@ import type { WithIntlProps, WrappedComponentProps } from 'react-intl';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
 export type ReplaceProps = {
+    /**
+     * When `false`, the replace label, field, replacement count message and both
+     * replace buttons are not rendered. Both chevrons and the Close button stay.
+     * Defaults to `true`.
+     */
+    allowReplace?: boolean;
     canReplace: boolean;
     count: {
         index: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-find-replace",
-	"version": "21.0.1",
+	"version": "21.1.0",
 	"description": "find replace plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -24,6 +24,7 @@
 		"@atlaskit/editor-plugin-analytics": "^21.0.0",
 		"@atlaskit/editor-plugin-block-collapse": "^7.0.0",
 		"@atlaskit/editor-plugin-card": "^27.0.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^23.0.0",
 		"@atlaskit/editor-plugin-expand": "^22.0.0",
 		"@atlaskit/editor-plugin-mentions": "^23.0.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^22.0.0",
@@ -36,13 +37,15 @@
 		"@atlaskit/mention": "^30.0.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
+		"@atlaskit/platform-feature-flags-react": "^1.2.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/textfield": "^10.2.0",
-		"@atlaskit/tmp-editor-statsig": "^206.0.0",
+		"@atlaskit/tmp-editor-statsig": "^207.0.0",
 		"@atlaskit/tokens": "^20.0.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
+		"bind-event-listener": "^3.0.0",
 		"classnames": "^2.2.5",
 		"lodash": "^4.17.21",
 		"raf-schd": "^4.0.3"
@@ -57,7 +60,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^125.1.0",
+		"@atlaskit/editor-common": "^125.2.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},